增加锁定线段功能

src/assets/LineManager.js

@@ -97,13 +97,13 @@ export default class LineManager {
       // ctx.closePath()
       ctx.stroke()
 
-      // 标记每个点位.
-      if (this._status != LineManager.VIEW) {
+      // 如果当前状态不是查看状态,并且该线段没有标记锁定, 标记出每个点位. 
+      if (this._status != LineManager.VIEW && !lineObj.lock) {
         ctx.fillStyle = lineObj.pointColor ? lineObj.pointColor : this._pointColor
         for (let i = 0; i < pixels.length; i++) {
           const pixel = pixels[i];
           ctx.beginPath()
-          ctx.arc(pixel.getX(), pixel.getY(), this._pointSize, 0, 2 * Math.PI)
+          ctx.arc(pixel.getX(), pixel.getY(), lineObj.pointSize || this._pointSize, 0, 2 * Math.PI)
           ctx.fill()
         }
       }
@@ -159,6 +159,7 @@ export default class LineManager {
     // console.log(pixel, clearWidth)
     let flag = false
     let lines = this._lines.map(lineObj => {
+      if (lineObj.lock) return lineObj
       let obj = this.filterPixels(lineObj, pixel, clearWidth)
       if (obj == null) {
         return lineObj
@@ -240,6 +241,17 @@ export default class LineManager {
     this._draw()
   }
 
+  /**
+   * 重新渲染数据
+   * @param {Array<Opt>} list 
+   * opt :
+   * color : String 线段默认颜色 '#fff'
+   * pointSize : Number 点位大小 3
+   * pointColor : String 点位颜色 默认线段颜色
+   * lastPointColor : String 最后一个点的颜色 'red'
+   * lastPointSize : Number 最后一个点的大小,默认pointSize
+   * lock : Bool  true代表不可擦除,编辑
+   */
   setData(list) {
     this._lines = list
 

src/components/LineView.vue

 <template>
   <div class="line-container" @mouseout="mouseout" @mouseover="mouseover">
     <!-- <span class="name">{{name}} {{startPointName}}</span> -->
-    <div style="width:180px;margin-right:5px;" class="input-container">
+    <div style="width:150px;margin-right:5px;" class="input-container">
       <el-input :value="name" @input="changeName"></el-input>
     </div>
 
     <el-button type="success" size="mini" @click="reverse">反转</el-button>
     <el-button @click="remove" type="danger" icon="el-icon-delete" size="mini" circle></el-button>
     <el-button type="primary" size="mini" @click="copyLine">导出</el-button>
+    <el-switch :value="data.lock" size="mini" style="margin-left:5px;" @input="changeLock"></el-switch>
+
   </div>
 </template>
 <script>
@@ -45,6 +47,9 @@ export default {
     changeName (val) {
       this.$emit('input', val)
     },
+    changeLock () {
+      this.$emit('lock')
+    },
     remove () {
       this.$emit('remove')
     },

src/views/Home.vue

@@ -15,7 +15,7 @@
       </div>
       <div class="line-control">
         <template v-if="statusName == '查看'">
-          <LineView v-for="(line,index) in lineList" :key="line.id" :data="line" @remove="removeLine(index)" @reverse="reverseLine(line,index)" @mouseout="lineMouseOut(line,index)" @mouseover="lineMouseOver(line,index)" @copyLine="copyLine(line)" @input="e=>line.name = e" />
+          <LineView v-for="(line,index) in lineList" :key="line.id" :data="line" @remove="removeLine(index)" @reverse="reverseLine(line,index)" @mouseout="lineMouseOut(line,index)" @mouseover="lineMouseOver(line,index)" @copyLine="copyLine(line)" @input="e=>line.name = e" @lock="changeLock(line,index)" />
         </template>
         <template v-else-if="statusName == '擦除'">
           <div class="clear-container">
@@ -35,7 +35,8 @@
 
 <script>
 let __id = 0
-// import HANG_ZHOU from '../assets/HANGZHOU'
+import HANG_ZHOU from '../assets/HANGZHOU'
+import SHAO_XING from '../assets/SHAOXING'
 import AddDialog from '@/components/AddDialog'
 import RemarkDialog from '@/components/RemarkDialog'
 import TransferDialog from '@/components/TransferDialog'
@@ -98,12 +99,17 @@ export default {
     })
 
     // // 测试代码
-    // setTimeout(() => {
-    //   this.addLine({
-    //     name: '杭州',
-    //     text: HANG_ZHOU
-    //   })
-    // }, 500);
+    setTimeout(() => {
+      this.addLine({
+        name: '杭州',
+        text: HANG_ZHOU
+      })
+
+      this.addLine({
+        name: '绍兴',
+        text: SHAO_XING
+      })
+    }, 500);
 
   },
   methods: {
@@ -193,7 +199,8 @@ export default {
           line: t,
           id: ++__id,
           name: obj.name + num,
-          color: 'blue'
+          color: 'blue',
+          lock: false
         }
         if (num) num++;
         return o;
@@ -210,6 +217,12 @@ export default {
         line: data.line.reverse()
       })
     },
+    changeLock (data, index) {
+      this.lineList.splice(index, 1, {
+        ...data,
+        lock: !data.lock
+      })
+    },
     exportLine (list) {
       let data = this.lineList.map(lineObj => {
         let cid = list.find(id => id == lineObj.id)