Vue-Konva实现实时画板
Vue-Konva实现实时画板Konva是什么? 说Konva之前不得不说html5的一个新增标签: <Canvas>,其中文翻译为帆布、画布,我们可以利用javas在上面绘制各种图像、动画等,在html5之前,绘画只能借助flash动画实现,因此界面不得不使用JavaScript来和flash进行交互。而利用canvas可以直接使用JavaScript完成绘制。 而Konva是一
Vue-Konva实现实时画板
Konva是什么?
说Konva之前不得不说html5的一个新增标签: <Canvas>,其中文翻译为帆布、画布,我们可以利用javas在上面绘制各种图像、动画等,在html5之前,绘画只能借助flash动画实现,因此界面不得不使用JavaScript来和flash进行交互。而利用canvas可以直接使用JavaScript完成绘制。
而Konva是一个HTML5 Canvas JavaScript框架,Konva 提供了高性能的动画,补间,节点嵌套,布局,滤镜,缓存,事件绑定(桌面/移动端)等等功能。说人话就是方便了我们在画图时的各种操作。
绘画准备
根据Konva的语法,先准备一个舞台(v-stage),在舞台上放一个层(v-layer),最后再在层放线条(v-line),通过for循环线条来显示最后图像
<v-stage>
<v-layer>
<v-line v-for="(line, index) in lines" :key="index" :config="line"/>
</v-layer>
</stage>
显示原理
在Konva中用数组来存储线条数据
lines: [
{stroke: '#ffooo', strokeWidth: 5, points: [100, 200, 300, 400]},
{stroke: '#ffooo', strokeWidth: 6, points: [100, 200, 300, 400]}
]
数组中的每一个对象都表示一条线条对象
- stroke是线条颜色,
- strokeWidth为线条粗细
- points是线条的坐标点数组,数组中每两项数据就是X,Y坐标
- 如在(100,200)处有个点,(300,400)处也有个点,两个点依次连接就是画的线,
鼠标画线原理
通过监听舞台上的鼠标时间来实现获取绘制的线条数据
-
监听鼠标按下开始画线
mousedownHandler(e) { // 是否开始画线 this.painting = true // 鼠标按下开始画线 const newLine = { stroke: this.stroke, strokeWidth: this.strokeWidth, points: [e.evt.layerX, e.evt.layerY] } // 存储到vuex中 this.drawNewline(newLine) },
鼠标按下就开始画一个新的线条,并把按下坐标(即开始坐标)保存为一个新线添加到lines中
-
监听鼠标滑动获取滑动轨迹
mousemoveHandler(e) { if (this.painting) { // 当前line的最后一项就是现在正在画的line const lastLine = this.lines[this.lines.length - 1] // 滑动时将鼠标XY坐标添加到改线条后面 lastLine.points = lastLine.points.concat([e.evt.layerX, e.evt.layerY]) // 更新 this.updateNewLine(lastLine) } },
判断当前鼠标是否按下,只有按住鼠标才是在画线。当按住滑动时,当前lines的最后一项就是正在滑动这个线,将滑动过程中的X,Y坐标拼接到线条的坐标数组points中去,一直滑动一直拼接添加
-
鼠标松开,结束画线(不在添加鼠标轨迹)
mouseupHandler() { console.log('鼠标释放了') //结束画线(停止了鼠标滑动事件中的操作) this.painting = false }
更多推荐
所有评论(0)