@vislite/canvas

一个更灵活好用的数据驱动的画布

如何使用？

npm install --save @vislite/canvas

安装后，准备好渲染位置

<div id="root" style="width:400px;height:400px"></div>

然后直接使用：

import Canvas from "@vislite/canvas"

let canvas = new Canvas({
    el: document.getElementById("root"),
    data: {
        radius: 100
    },
    time: 200, // 动画时长，可选（v1.1.0 新增）
    lifecycle: { // 生命周期，可选（v1.1.0 新增）
        resized(){} // 画布大小改变后
    },
    template: [{
        name: "circle",
        attr: {
            type: "fill",
            cx: 200,
            cy: 200,
            radius: _this => _this.data.radius
        },
        config: {
            fillStyle: "red"
        },
        event: {
            click(event) {
                console.log("你点击了我")
            }
        },
        children: []
    }]
})

这样，一个红色的球就绘制出来了。

如果希望改变球的大小，可以直接：

canvas.setData({
    radius : 200
})

还可以看出来，点击球的时候会触发点击事件，如果想在点击的时候修改球大小，就可以：

......
event: {
    click(event) {
        // console.log("你点击了我")
        this.setData({
            radius : 200
        })
    }
},
......

此外，其中config属性和vislite的canvas画笔配置一致。

下面是更多功能明细：

• 指令（for、if）
• 事件
• 图形（arc 弧、circle 圆、rect 矩形、text 文字）
• 自定义图形
• 自定义类型

此外，获取的canvas对象还有如下方法或属性：

painter

画笔，和vislite的canvas画笔API一致，只读。

width

画布宽，只读。

height

画布高，只读。

sized

v1.1.0 新增

是否完成画布初始化，只读。

time

v1.1.0 新增

当前动画时长，可以修改此值以控制下次动画时长：

canvas.time = "一个新值"

data

数据，只读。

setData

设置数据，会触发新的绘制：

canvas.setData({
    // ...
})

startDida

v1.1.0 新增

开启滴答轮询动画：

canvas.startDida(time=500)

stopDida

v1.1.0 新增

停止滴答轮询动画：

canvas.stopDida()

版权

MIT License

Copyright (c) zxl20070701 走一步，再走一步