canvas-terminal

TerminalCanvas

一个用于在linux终端上创建画布的node模块,支持事件监听，图形绘制...

Installation

• npm install canvas-terminal [-g]

Getting Started

const Canvas = require('../index').Canvas;
const Container = require('../index').Container;
const Graphics = require('../index').Graphics;
const BgColor = require('../index').BgColor;
const FontColor = require('../index').FontColor;
 
let canvas = new Canvas(33,33);
let container = new Container();
 
let graphics = new Graphics();//创建绘图类Graphics
 
//绘制一条线
graphics.setLineStyle(FontColor.black,BgColor.cyan);
graphics.setFillStyle(FontColor.white,BgColor.black);
graphics.drawPath([
    [5,1],[7,7]
]);
let line = graphics.toDisplayObject();
 
graphics.clear();//清除绘制缓存，准备下次绘制
 
//绘制一个圆
graphics.setLineStyle(FontColor.black,BgColor.cyan);
graphics.drawCycle(10,10,9,' ',true);
let cycle = graphics.toDisplayObject();
 
//将线和圆放入container容器中
container.addChild(cycle);
container.addChild(line);
 
//初始化线和圆的位置
line.x = 1;
line.y = 1;
cycle.x = 10;
cycle.y = 10;
 
//初始化线的事件响应
line.on('onKeyDown',(key)=>{
    switch (key){
        case 'w':
            line.y--;
            break;
        case 'a':
            line.x--;
            break;
        case 's':
            line.y++;
            break;
        case 'd':
            line.x++;
            break;
        case 'z':
            line.scale(2);
            break;
 
    }
});
 
//初始化渲染循环
setInterval(()=>{
     canvas.render(container);
},200);
 

结果如图,这样我们就得到了一条可以控制位置的线和一个静止不动的圆

简单说明:
Canvas是核心类,负责将数据渲染到terminal上.Container是容器类,负责承载数据.Graphics是绘制类,负责通过内部方法生成图像数据.

框架通常的使用流程是:

• 创建一个固定长宽的Canvas类实例
• 创建一个Container类实例
• 通过Graphics类创建出各种图像数据,并放入Container容器实例中
• 最后将Container实例交给Canvas实例渲染即可.

API

Canvas extends EventEmitter

• 属性

emptyGird

string

空格子的填充元素，格子大小按照该元素大小进行计算

• 方法

constructor	结构体，创建一个固定大小的渲染区间	@height int 渲染区间的高度 @width int 渲染区间的宽度
render	渲染函数，将数据渲染到terminal上	@display DisplayObject 需要渲染的DisplayObject
setPoint	直接在终端上绘制一个点的方法	@x int@y int 横竖坐标，起始点在画布左上角 @char string 填充字符，超过单位长度会进行截取 @font FontColor@bg BgColor@light Light 填充风格，详见Color部分
clear	清屏函数

Container extends DisplayObject

• 属性

children

array

空格子的填充元素，格子大小按照该元素大小进行计算

• 方法

constructor	结构体	@?height int 数据容器的高度 @?width int 数据容器的宽度
addChild	添加一个子节点	@child DisplayObject 子节点
removeChild	去除一个子节点	@index int 删除子节点的序号
removeAll	去除所有子节点

Graphics

• 方法

constructor	结构体	@?height int 数据容器的高度 @?width int 数据容器的宽度
setLineStyle	设置线的绘制风格	@font FontColor@bg BgColor@light Light 绘制风格，详见Color部分
setFillStyle	设置填充时的绘制风格	@font FontColor@bg BgColor@light Light 绘制风格，详见Color部分
drawPoint	绘制点	@x int@y int 点坐标 @char string 绘制字符 @?isFill 是否使用填充风格
drawLine	绘制直线	@x0 int@y0 int 起点坐标 @x int@y int 终点坐标
drawCycle	绘制圆	@xc int@yc int 圆坐标 @r int 半径 @char string 填充字符 isFill 是否使用填充风格
drawPath	绘制路径	@points Array 路径节点
toDisplayObject	将绘制结果转成DisplayObject	@RETURN DisplayObject

DisplayObject extends EventEmitter

• 属性

x	int	横坐标
y	int	纵坐标
fillStyle	Array	填充风格，数组内容为[FontColor,BgColor,Light]
lineStyle	Array	线风格，数组内容为[FontColor,BgColor,Light]
height	int	容器高度
width	int	容器宽度
visible	boolean	是否可见

• 方法

constructor	结构体	@?height int 数据容器的高度 @?width int 数据容器的宽度
on	设置监听器	@event string 监听事件,目前可以监听事件有@onKeyDown， 回调参数是按下的按键值 @callback function 回调函数
clear	清空数据
copy	拷贝函数	@o DisplayObject 拷贝的对象
scale	放缩函数	@a int 放缩倍数

Color

FontColor	字色类	terminal字色号映射
BgColor	背景色类	terminal背景色号映射
Light	高亮类	terminal高亮号映射