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 终点坐标 |
drawRectangle | 绘制矩形 | @x0 int@y0 int 左上角顶点坐标 @width int@height int 宽高 @char string 填充字符 @isFill 是否使用填充风格 |
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高亮号映射 |