Skip to content

M
mes-ui
Commit 38eefdba authored by 周远喜's avatar 周远喜
Browse files
Options

ok

parent 0166dfee
Hide whitespace changes
Inline Side-by-side
Showing with 44 additions and 38 deletions
pages/welcome/index.vue
View file @ 38eefdba
...@@ -35,13 +35,19 @@ ...@@ -35,13 +35,19 @@
<div <div
v-for="(line, s) in lines" v-for="(line, s) in lines"
class="pa line" class="pa line"
:style="lineStyles(line,s)" :style="lineStyles(line, s)"
:key="'s'+s" :key="'s' + s"
:title="line.start.join()+':'+line.end.join()" :title="line.start.join() + ':' + line.end.join()"
@click="removeLine(s)"
> >
<div class="lineMarker pa"></div> <div class="lineMarker pa"></div>
</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>
</div> </div>
</template> </template>
...@@ -57,15 +63,15 @@ export default { ...@@ -57,15 +63,15 @@ export default {
start: [100, 100], start: [100, 100],
end: [250, 100], end: [250, 100],
}, },
{ {
start: [100, 100], start: [100, 100],
end: [250, 100], end: [250, 100],
}, },
], ],
start:0, start: 0,
dotA:[], dotA: [],
dotB:[], dotB: [],
dots:[], dots: [],
menus: [], menus: [],
list: [], list: [],
arrList: [], arrList: [],
...@@ -142,18 +148,19 @@ export default { ...@@ -142,18 +148,19 @@ export default {
// this.menu = false; // this.menu = false;
// this.oneShow = false; // this.oneShow = false;
this.dots.push({ this.dots.push({
left:event.layerX+'px',top:event.layerY+'px' left: event.layerX + "px",
}) top: event.layerY + "px",
if(this.start===0){ });
this.dotA=[event.layerX,event.layerY]; if (this.start === 0) {
this.start=1; this.dotA = [event.layerX, event.layerY];
}else{ this.start = 1;
this.dotB=[event.layerX,event.layerY]; } else {
this.start=0; this.dotB = [event.layerX, event.layerY];
this.start = 0;
this.lines.push({ this.lines.push({
start:this.dotA, start: this.dotA,
end:this.dotB end: this.dotB,
}) });
} }
}, },
clickLi(v) { clickLi(v) {
...@@ -186,22 +193,17 @@ export default { ...@@ -186,22 +193,17 @@ export default {
// this.oneShow = false; // this.oneShow = false;
// this.menu = false; // this.menu = false;
}, },
lineStyles(line,s) { removeLine(s){
this.lines.splice(s,1);
},
lineStyles(line, s) {
// console.log(line); // console.log(line);
let w = (line.end[0] - line.start[0]); let w = line.end[0] - line.start[0];
let h =line.end[1] - line.start[1]; let h = line.end[1] - line.start[1];
let l = Math.sqrt(Math.pow(w, 2) + Math.pow(h, 2)); let l = Math.sqrt(Math.pow(w, 2) + Math.pow(h, 2));
let sinA =Math.sin(h/l)* 180 / Math.PI; let sinA =
// // if(line.end[1]>line.start[1]){ Math.atan2(line.end[1] - line.start[1], line.end[0] - line.start[0]) /
// // sinA=-sinA; 0.017453292;
// // }
// var sinA=0;
// if(s>0){
// sinA=45;
// }
let sinB =Math.cos(w/l)* 180 / Math.PI;
console.warn("line",w,h,sinA,sinB);
console.log(sinA); console.log(sinA);
return { return {
width: l + "px", width: l + "px",
...@@ -262,8 +264,8 @@ export default { ...@@ -262,8 +264,8 @@ export default {
// top: 50px; // top: 50px;
// left: 50px; // left: 50px;
// width: 200px; // width: 200px;
background: linear-gradient(to right, #A7C4D8, #24BDDD); background: linear-gradient(to right, #a7c4d8, #24bddd);
transform-origin:left; transform-origin: left;
.lineMarker { .lineMarker {
display: inline-block; display: inline-block;
width: 7px; width: 7px;
...@@ -285,12 +287,16 @@ export default { ...@@ -285,12 +287,16 @@ export default {
} }
// } // }
} }
.dot{ .line:hover{
border: 1px dotted red;
height: 6px;
cursor:pointer;
}
.dot {
width: 8px; width: 8px;
height: 8px; height: 8px;
background: red; background: red;
border-radius: 50%; border-radius: 50%;
} }
} }
.menu { .menu {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment