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）处也有个点，两个点依次连接就是画的线，

鼠标画线原理

  通过监听舞台上的鼠标时间来实现获取绘制的线条数据

1. 监听鼠标按下开始画线

   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中

2. 监听鼠标滑动获取滑动轨迹

   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中去，一直滑动一直拼接添加

3. 鼠标松开，结束画线（不在添加鼠标轨迹）

   mouseupHandler() {
         console.log('鼠标释放了')
       //结束画线（停止了鼠标滑动事件中的操作）
         this.painting = false
     }