ok

pages/welcome/index.vue

@@ -35,13 +35,19 @@
       <div
         v-for="(line, s) in lines"
         class="pa line"
-        :style="lineStyles(line,s)"
-        :key="'s'+s"
-        :title="line.start.join()+':'+line.end.join()"
+        :style="lineStyles(line, s)"
+        :key="'s' + s"
+        :title="line.start.join() + ':' + line.end.join()"
+        @click="removeLine(s)"
       >
         <div class="lineMarker pa"></div>
       </div>
-      <div v-for="(dot,iv) in dots" class="pa dot" :style="dot" :key="'v'+iv"></div>
+      <!-- <div
+        v-for="(dot, iv) in dots"
+        class="pa dot"
+        :style="dot"
+        :key="'v' + iv"
+      ></div> -->
     </div>
   </div>
 </template>
@@ -57,15 +63,15 @@ export default {
           start: [100, 100],
           end: [250, 100],
         },
-         {
+        {
           start: [100, 100],
           end: [250, 100],
         },
       ],
-      start:0,
-      dotA:[],
-      dotB:[],
-      dots:[],
+      start: 0,
+      dotA: [],
+      dotB: [],
+      dots: [],
       menus: [],
       list: [],
       arrList: [],
@@ -142,18 +148,19 @@ export default {
       // this.menu = false;
       // this.oneShow = false;
       this.dots.push({
-        left:event.layerX+'px',top:event.layerY+'px'
-      })
-      if(this.start===0){
-        this.dotA=[event.layerX,event.layerY];
-        this.start=1;
-      }else{
-        this.dotB=[event.layerX,event.layerY];
-        this.start=0;
+        left: event.layerX + "px",
+        top: event.layerY + "px",
+      });
+      if (this.start === 0) {
+        this.dotA = [event.layerX, event.layerY];
+        this.start = 1;
+      } else {
+        this.dotB = [event.layerX, event.layerY];
+        this.start = 0;
         this.lines.push({
-          start:this.dotA,
-          end:this.dotB
-        })
+          start: this.dotA,
+          end: this.dotB,
+        });
       }
     },
     clickLi(v) {
@@ -186,22 +193,17 @@ export default {
       // this.oneShow = false;
       // this.menu = false;
     },
-    lineStyles(line,s) {
+    removeLine(s){
+      this.lines.splice(s,1);
+    },
+    lineStyles(line, s) {
       // console.log(line);
-      let w = (line.end[0] - line.start[0]);
-      let h =line.end[1] - line.start[1];
+      let w = line.end[0] - line.start[0];
+      let h = line.end[1] - line.start[1];
       let l = Math.sqrt(Math.pow(w, 2) + Math.pow(h, 2));
-      let sinA =Math.sin(h/l)* 180 / Math.PI;
-      // // if(line.end[1]>line.start[1]){
-      // //   sinA=-sinA;
-      // // }
-      // var sinA=0;
-      // if(s>0){
-      //   sinA=45;
-      // }
-     
-       let sinB =Math.cos(w/l)* 180 / Math.PI;
-      console.warn("line",w,h,sinA,sinB);
+      let sinA =
+        Math.atan2(line.end[1] - line.start[1], line.end[0] - line.start[0]) /
+        0.017453292;
       console.log(sinA);
       return {
         width: l + "px",
@@ -262,8 +264,8 @@ export default {
       // top: 50px;
       // left: 50px;
       // width: 200px;
-      background: linear-gradient(to right, #A7C4D8, #24BDDD);
-      transform-origin:left;
+      background: linear-gradient(to right, #a7c4d8, #24bddd);
+      transform-origin: left;
       .lineMarker {
         display: inline-block;
         width: 7px;
@@ -285,12 +287,16 @@ export default {
       }
       // }
     }
-    .dot{
+    .line:hover{
+      border: 1px dotted red;
+      height: 6px;
+      cursor:pointer;
+    }
+    .dot {
       width: 8px;
       height: 8px;
       background: red;
       border-radius: 50%;
-      
     }
   }
   .menu {