benvirus/ben-canvas

A mini tool lib of Canvas

Api Document

import DataCanvas from 'ben-canvas';

line

DataCanvas.line({
    lineWidth: 2, // The thickness of the line. optional.
    color: '#F00', // the color of the line. optional.
    points:[
        {
            x: 0.123,   // percentage
            y: 0.123,   // percentage
        }, {
            // ...
        }
    ]
});

rect

DataCanvas.rect({
    lineWidth: 2, // The width of the rect border. optional.
    color: '#FF0', // the color of the rect border. optional.
    position: {
        x: 0.123,  // the x coordinate of left-top point of the rectangle in percentage
        y: 0.123   // the y coordinate of left-top point of the rectangle in percentage
    },
    width: 0.123,  // percentage
    height: 0.123  // percentage
});

text

DataCanvas.text({
    size: 14, // The font-size of the text. Optional.
    lineHeight: 18, // The line-height of the text. Optional.
    color: '#F00',  // The color of the text. Optional.
    position: {
        x: 0.123,  // percentage
        y: 0.123   // percentage
    },
    width: 0.123,   // percentage
    height: 0.123  // percentage
});

ellipse

DataCanvas.ellipse({
    lineWidth: 2, // The width of the ellipse border. optional.
    points: [
        {x: 0.1, y: 0.1},
        {x: 0.9, y: 0.9}
    ]
});

ease

DataCanvas.ease({
    lineWidth: 2, // The thickness of the ease pen. optional.
    points: [
        {x: 0.1, y: 0.1},  // The trajectory which you want to ease;
        {x: 0.9, y: 0.9},
        // .....
    ]
});

clear

DataCanvas.clear(); // 清楚整个画布

Change Log

1.1.1 (2018-05-15)

• [需求] 实现箭头接口。

1.1.0 (2017-09-30)

• [需求] 实现椭圆接口。

1.0.5 (2017-09-13)

• [优化] 文字工具的字体可配置，默认使用 win 和 mac 上表现差不多的字体。

1.0.4 (2017-09-06)

• [需求] 文字 text 方法可配置文字的大小和行高。

1.0.2 (2017-08-21)

• [需求] 画笔粗细和橡皮擦大小可配置。

1.0.1 (2017-08-04)

• [bug] 修复在画矩形时会再次重绘上次的直线数据。

1.0.0 (2017-08-03) 👏

• [feature] 提供画图功能类库。

Contact

Author: Ben Chen

E-mail: chenhaijiao@howzhi.com

Contributor: Gao Yong

E-mail: gaoyong@howzhi.com