import DataCanvas from 'ben-canvas';
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
}, {
// ...
}
]
});
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
});
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
});
DataCanvas.ellipse({
lineWidth: 2, // The width of the ellipse border. optional.
points: [
{x: 0.1, y: 0.1},
{x: 0.9, y: 0.9}
]
});
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},
// .....
]
});
DataCanvas.clear(); // 清楚整个画布
- [需求] 实现箭头接口。
- [需求] 实现椭圆接口。
- [优化] 文字工具的字体可配置,默认使用 win 和 mac 上表现差不多的字体。
- [需求] 文字 text 方法可配置文字的大小和行高。
- [需求] 画笔粗细和橡皮擦大小可配置。
- [bug] 修复在画矩形时会再次重绘上次的直线数据。
- [feature] 提供画图功能类库。
Author: Ben Chen
E-mail: [email protected]
Contributor: Gao Yong
E-mail: [email protected]