Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/easonzero/terminalcanvas

A module that is used to create a canvas in the terminal
https://github.com/easonzero/terminalcanvas

canvas nodejs terminal

Last synced: about 2 months ago
JSON representation

A module that is used to create a canvas in the terminal

Awesome Lists containing this project

README 

        
# TerminalCanvas



[![LICENSE](https://img.shields.io/badge/license-Anti%20996-blue.svg)](https://github.com/996icu/996.ICU/blob/master/LICENSE)

[![Badge](https://img.shields.io/badge/link-996.icu-red.svg)](https://996.icu/#/zh_CN)



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



### Installation

* npm install canvas-terminal [-g]



### Getting Started



```javascript

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);



```

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

![结果](./image/result.png)



简单说明:   

`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高亮号映射