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的最后一项就是现在正在画的lineconst 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}

Vue-Konva实现实时画板相关推荐

vue+konva.js图片数据标注多边形矩形---demo2.0。添加了其他功能和完善了代码。
文章目录前言一. 自适应画布二.新矩形和多边形 1.绘画多变形时,右击结束绘画.2.重新调整图形大小时,顶点已经约束不能拖拽出画布. 三.ctrl+z撤销和del删除选中某一个图形,按ctrl ...
vue+konva.js(未使用vue-konva)实现数据标注矩形和多边形功能
文章目录前言一.矩形和多边形绘画二.矩形和多边形重新调整三.代码四,添加了其他功能和完善了代码.konva标注多边形矩形---demo2.0 源码下载前言 vue+konva.js(未使用 ...
用php做一个简单的汇率,vue实现简单实时汇率计算功能
最近在自己摸索vue的使用,因为相对于只是去看教程和实例,感觉不如自己动手写一个demo入门来的快.刚好看到小程序中有一个简单但是很精致的应用极简汇率,而且它的表现形式和vue的表现形式很像,于是想着 ...
使用Pusher和Vue.js构建实时聊天应用
如今,实时通信的应用程序越来越流畅,用户体验也变得越来越流行. 在本教程中,我们将使用由Chater提供的服务ChatKit提供支持的Vue.js构建实时聊天应用程序. ChatKit服务将为我们提供 ...
vue父页面实时给子页面传值
实操笔记: 设置set this.DataList = []const varName='formObj' this[varName].PkIds && delete this[var ...
vue中如何实时修改输入的值
vue中如何实时修改输入的值经常看到需要对用户输入的值进行实时修改,有时是需要修改为指定的展示内容,有时候是用来校验,禁止用户输入非法数据,总之是一个常见的需求吧,只是自己一直没有特意去关注.思来想 ...
Vue自定义指令-实时时间转换指令 v-time开发
目录前言 1. 新建html.index.js文件 2. 时间转换逻辑 3. 新建 time.js 文件 4 总结前言为了显示出实时性 ,在一些社交类产品中,比如WX朋友圈或微博等地方,作者发 ...
基于Vue实现关键词实时搜索高亮显示关键词
最近在做移动real-time-search于实时搜索和关键词高亮显示的功能,通过博客的方式总结一下,同时希望能够帮助到别人~~~ 如果不喜欢看文字的朋友我写了一个demo方便已经上传到了github ...
用vue实现简单实时汇率计算功能
最近在自己摸索vue的使用,因为相对于只是去看教程和实例,感觉不如自己动手写一个demo入门来的快.刚好看到小程序中有一个简单但是很精致的应用极简汇率,而且它的表现形式和vue的表现形式很像,于是想着 ...

Vue-Konva实现实时画板

Vue-Konva实现实时画板

Konva是什么？

绘画准备

显示原理

鼠标画线原理

Vue-Konva实现实时画板相关推荐

最新文章

热门文章