|  | @@ -1,15 +1,19 @@
 | 
											
												
													
														|  |  <template>
 |  |  <template>
 | 
											
												
													
														|  |    <div id="container-box">
 |  |    <div id="container-box">
 | 
											
												
													
														|  | -    <div>
 |  | 
 | 
											
												
													
														|  | -      <div>
 |  | 
 | 
											
												
													
														|  | 
 |  | +    <div style="display: flex; align-items: center;">
 | 
											
												
													
														|  | 
 |  | +      <div style="margin-left: 10px;display: flex;align-items: center;">
 | 
											
												
													
														|  | 
 |  | +        <span>缩放: </span>
 | 
											
												
													
														|  | 
 |  | +        <div style="width: 200px;margin-left: 10px;">
 | 
											
												
													
														|  | 
 |  | +          <el-slider v-model="value1" @input="inputValue" :step="0.01" :min="0.5" :max="3"></el-slider>
 | 
											
												
													
														|  | 
 |  | +        </div>
 | 
											
												
													
														|  | 
 |  | +      </div>
 | 
											
												
													
														|  | 
 |  | +      <div style="margin-left: 20px;">
 | 
											
												
													
														|  |          <el-radio-group v-model="radio" @input="addEvent">
 |  |          <el-radio-group v-model="radio" @input="addEvent">
 | 
											
												
													
														|  |            <el-radio :label="1">拖动</el-radio>
 |  |            <el-radio :label="1">拖动</el-radio>
 | 
											
												
													
														|  | -          <el-radio :label="2">放大和绘点</el-radio>
 |  | 
 | 
											
												
													
														|  | 
 |  | +          <el-radio :label="2">绘点</el-radio>
 | 
											
												
													
														|  |          </el-radio-group>
 |  |          </el-radio-group>
 | 
											
												
													
														|  |        </div>
 |  |        </div>
 | 
											
												
													
														|  | -      <!-- <div style="width: 200px;">
 |  | 
 | 
											
												
													
														|  | -        <el-slider v-model="value1" @click="inputValue" :step="0.01" :max="1"></el-slider>
 |  | 
 | 
											
												
													
														|  | -      </div> -->
 |  | 
 | 
											
												
													
														|  | 
 |  | +      
 | 
											
												
													
														|  |      </div>
 |  |      </div>
 | 
											
												
													
														|  |  
 |  |  
 | 
											
												
													
														|  |      <div id="container">
 |  |      <div id="container">
 | 
											
										
											
												
													
														|  | @@ -39,14 +43,16 @@ export default {
 | 
											
												
													
														|  |          scale: 1,
 |  |          scale: 1,
 | 
											
												
													
														|  |        },
 |  |        },
 | 
											
												
													
														|  |        spanStyle: {
 |  |        spanStyle: {
 | 
											
												
													
														|  | -        width: '10px',
 |  | 
 | 
											
												
													
														|  | -        height: '10px',
 |  | 
 | 
											
												
													
														|  | 
 |  | +        width: '48px',
 | 
											
												
													
														|  | 
 |  | +        height: '48px',
 | 
											
												
													
														|  |          borderRadius: '5px',
 |  |          borderRadius: '5px',
 | 
											
												
													
														|  | -        background: 'red',
 |  | 
 | 
											
												
													
														|  | 
 |  | +        backgroundImage: `url(${require("@/assets/biaoji.png")})`,
 | 
											
												
													
														|  | 
 |  | +        backgroundSize: "100% 100%",
 | 
											
												
													
														|  |          position: 'absolute',
 |  |          position: 'absolute',
 | 
											
												
													
														|  |          left: '-10px',
 |  |          left: '-10px',
 | 
											
												
													
														|  |          top: '-10px',
 |  |          top: '-10px',
 | 
											
												
													
														|  | -        transform: 'translate(-50%, -50%)'
 |  | 
 | 
											
												
													
														|  | 
 |  | +        transform: 'translate(-50%, -100%)',
 | 
											
												
													
														|  | 
 |  | +        display: 'none'
 | 
											
												
													
														|  |        },
 |  |        },
 | 
											
												
													
														|  |        imageUrl: null,
 |  |        imageUrl: null,
 | 
											
												
													
														|  |  
 |  |  
 | 
											
										
											
												
													
														|  | @@ -54,9 +60,12 @@ export default {
 | 
											
												
													
														|  |        styleObject: {
 |  |        styleObject: {
 | 
											
												
													
														|  |          position: 'absolute',
 |  |          position: 'absolute',
 | 
											
												
													
														|  |          top: '0',
 |  |          top: '0',
 | 
											
												
													
														|  | -        left: '0'
 |  | 
 | 
											
												
													
														|  | 
 |  | +        left: '0',
 | 
											
												
													
														|  | 
 |  | +        '--scale-value': 1
 | 
											
												
													
														|  |        },
 |  |        },
 | 
											
												
													
														|  | -      value1: 0.9,
 |  | 
 | 
											
												
													
														|  | 
 |  | +      value1: 1,
 | 
											
												
													
														|  | 
 |  | +      
 | 
											
												
													
														|  | 
 |  | +      minScale: 0.2,// 最小缩放
 | 
											
												
													
														|  |  
 |  |  
 | 
											
												
													
														|  |        radio: null,
 |  |        radio: null,
 | 
											
												
													
														|  |        //  拖动事件
 |  |        //  拖动事件
 | 
											
										
											
												
													
														|  | @@ -82,26 +91,30 @@ export default {
 | 
											
												
													
														|  |          this.container.addEventListener("mousedown", this.startDrag) // 鼠标按下
 |  |          this.container.addEventListener("mousedown", this.startDrag) // 鼠标按下
 | 
											
												
													
														|  |          this.container.addEventListener("mousemove", this.doDrag) // 鼠标移动
 |  |          this.container.addEventListener("mousemove", this.doDrag) // 鼠标移动
 | 
											
												
													
														|  |          this.container.addEventListener("mouseup", this.stopDrag) // 鼠标松开
 |  |          this.container.addEventListener("mouseup", this.stopDrag) // 鼠标松开
 | 
											
												
													
														|  | -        this.image.addEventListener("mouseup", this.stopDrag) // 鼠标松开
 |  | 
 | 
											
												
													
														|  | -        this.preview.addEventListener("mouseup", this.stopDrag) // 鼠标按下
 |  | 
 | 
											
												
													
														|  | 
 |  | +        // this.image.addEventListener("mouseup", this.stopDrag) // 鼠标松开
 | 
											
												
													
														|  | 
 |  | +        // this.preview.addEventListener("mouseup", this.stopDrag) // 鼠标按下
 | 
											
												
													
														|  |        } else {
 |  |        } else {
 | 
											
												
													
														|  |          this.container.removeEventListener("mousedown", this.startDrag) // 鼠标按下
 |  |          this.container.removeEventListener("mousedown", this.startDrag) // 鼠标按下
 | 
											
												
													
														|  |          this.container.removeEventListener("mousemove", this.doDrag) // 鼠标移动
 |  |          this.container.removeEventListener("mousemove", this.doDrag) // 鼠标移动
 | 
											
												
													
														|  |          this.container.removeEventListener("mouseup", this.stopDrag) // 鼠标松开
 |  |          this.container.removeEventListener("mouseup", this.stopDrag) // 鼠标松开
 | 
											
												
													
														|  | -        this.image.removeEventListener("mouseup", this.stopDrag) // 鼠标松开
 |  | 
 | 
											
												
													
														|  | -        this.preview.removeEventListener("mouseup", this.stopDrag) // 鼠标按下
 |  | 
 | 
											
												
													
														|  | 
 |  | +        // this.image.removeEventListener("mouseup", this.stopDrag) // 鼠标松开
 | 
											
												
													
														|  | 
 |  | +        // this.preview.removeEventListener("mouseup", this.stopDrag) // 鼠标按下
 | 
											
												
													
														|  |        }
 |  |        }
 | 
											
												
													
														|  |  
 |  |  
 | 
											
												
													
														|  |        if (this.radio == 2) {
 |  |        if (this.radio == 2) {
 | 
											
												
													
														|  | -        this.preview.addEventListener("wheel", this.wheelFun) // 鼠标按下
 |  | 
 | 
											
												
													
														|  | 
 |  | +        // this.preview.addEventListener("wheel", this.wheelFun) // 鼠标按下
 | 
											
												
													
														|  |          this.preview.addEventListener("click", this.previewOnclick) // 鼠标移动
 |  |          this.preview.addEventListener("click", this.previewOnclick) // 鼠标移动
 | 
											
												
													
														|  |        } else {
 |  |        } else {
 | 
											
												
													
														|  | -        this.preview.removeEventListener("wheel", this.wheelFun) // 鼠标按下
 |  | 
 | 
											
												
													
														|  | 
 |  | +        // this.preview.removeEventListener("wheel", this.wheelFun) // 鼠标按下
 | 
											
												
													
														|  |          this.preview.removeEventListener("click", this.previewOnclick) // 鼠标移动
 |  |          this.preview.removeEventListener("click", this.previewOnclick) // 鼠标移动
 | 
											
												
													
														|  |        }
 |  |        }
 | 
											
												
													
														|  |      },
 |  |      },
 | 
											
												
													
														|  |      initData(url) {
 |  |      initData(url) {
 | 
											
												
													
														|  |        if(!url) return
 |  |        if(!url) return
 | 
											
												
													
														|  | 
 |  | +      this.value1 = 1
 | 
											
												
													
														|  | 
 |  | +      this.radio = null
 | 
											
												
													
														|  | 
 |  | +      this.styleObject.top = '0'
 | 
											
												
													
														|  | 
 |  | +      this.styleObject.left = '0'
 | 
											
												
													
														|  |        this.imageUrl = url
 |  |        this.imageUrl = url
 | 
											
												
													
														|  |        let image = new Image();
 |  |        let image = new Image();
 | 
											
												
													
														|  |        image.src = url;
 |  |        image.src = url;
 | 
											
										
											
												
													
														|  | @@ -126,30 +139,34 @@ export default {
 | 
											
												
													
														|  |        const top = needHeight * (this.container.clientHeight / this.image.naturalHeight);
 |  |        const top = needHeight * (this.container.clientHeight / this.image.naturalHeight);
 | 
											
												
													
														|  |        this.spanStyle.left = left + "px"
 |  |        this.spanStyle.left = left + "px"
 | 
											
												
													
														|  |        this.spanStyle.top = top + "px"
 |  |        this.spanStyle.top = top + "px"
 | 
											
												
													
														|  | 
 |  | +      this.spanStyle.display = 'inline-block'
 | 
											
												
													
														|  |        this.$emit("input", left+ ',' + top);
 |  |        this.$emit("input", left+ ',' + top);
 | 
											
												
													
														|  |      },
 |  |      },
 | 
											
												
													
														|  |      wheelFun(event) {
 |  |      wheelFun(event) {
 | 
											
												
													
														|  | -      event.preventDefault();
 |  | 
 | 
											
												
													
														|  | 
 |  | +      // event.preventDefault();
 | 
											
												
													
														|  |  
 |  |  
 | 
											
												
													
														|  | -      const scaleDelta = event.deltaY * -1; // 可根据实际需求调整缩放速度
 |  | 
 | 
											
												
													
														|  | -      const offsetX = event.offsetX / preview.clientWidth;
 |  | 
 | 
											
												
													
														|  | -      const offsetY = event.offsetY / preview.clientHeight;
 |  | 
 | 
											
												
													
														|  | 
 |  | +      // const scaleDelta = event.deltaY * -1; // 可根据实际需求调整缩放速度
 | 
											
												
													
														|  | 
 |  | +      // const offsetX = event.offsetX / preview.clientWidth;
 | 
											
												
													
														|  | 
 |  | +      // const offsetY = event.offsetY / preview.clientHeight;
 | 
											
												
													
														|  |  
 |  |  
 | 
											
												
													
														|  | -      const scaleVal = scaleDelta > 0 ? 0.02 : -0.02;
 |  | 
 | 
											
												
													
														|  | -      this.factor.scale += scaleVal;
 |  | 
 | 
											
												
													
														|  | -      console.log("event.deltaY====", scaleDelta, this.factor.scale)
 |  | 
 | 
											
												
													
														|  | -      if (this.factor.scale > 0.5) {
 |  | 
 | 
											
												
													
														|  | -        this.factor.scale += scaleVal;
 |  | 
 | 
											
												
													
														|  | -      }
 |  | 
 | 
											
												
													
														|  | 
 |  | +      // const scaleVal = scaleDelta > 0 ? 0.02 : -0.02;
 | 
											
												
													
														|  | 
 |  | +      // //this.factor.scale += scaleVal;
 | 
											
												
													
														|  | 
 |  | +      // console.log("event.deltaY====", scaleDelta, this.factor.scale)
 | 
											
												
													
														|  | 
 |  | +      // if (this.factor.scale > this.minScale ) {
 | 
											
												
													
														|  | 
 |  | +      //   this.factor.scale += scaleVal;
 | 
											
												
													
														|  | 
 |  | +      // }
 | 
											
												
													
														|  |  
 |  |  
 | 
											
												
													
														|  | -      this.preview.style.transformOrigin = `${offsetX * 100}% ${offsetY * 100}%`;
 |  | 
 | 
											
												
													
														|  | -      this.preview.style.transform = `scale(${this.factor.scale})`;
 |  | 
 | 
											
												
													
														|  | 
 |  | +      // this.preview.style.transformOrigin = `${offsetX * 100}% ${offsetY * 100}%`;
 | 
											
												
													
														|  | 
 |  | +      // this.preview.style.transform = `scale(${this.factor.scale})`;
 | 
											
												
													
														|  |      },
 |  |      },
 | 
											
												
													
														|  |      inputValue(value1) {
 |  |      inputValue(value1) {
 | 
											
												
													
														|  |        console.log("value1====", value1)
 |  |        console.log("value1====", value1)
 | 
											
												
													
														|  |        // this.preview.style.transform = `scale(${value1})`;
 |  |        // this.preview.style.transform = `scale(${value1})`;
 | 
											
												
													
														|  | 
 |  | +      this.styleObject['--scale-value'] = value1
 | 
											
												
													
														|  |      },
 |  |      },
 | 
											
												
													
														|  | 
 |  | +
 | 
											
												
													
														|  |      startDrag(e) {
 |  |      startDrag(e) {
 | 
											
												
													
														|  | 
 |  | +      e.preventDefault()
 | 
											
												
													
														|  |        this.dragging = true;
 |  |        this.dragging = true;
 | 
											
												
													
														|  |        this.offset.x = e.clientX - Number(this.styleObject.left.replace('px', ''));
 |  |        this.offset.x = e.clientX - Number(this.styleObject.left.replace('px', ''));
 | 
											
												
													
														|  |        this.offset.y = e.clientY - Number(this.styleObject.top.replace('px', ''));
 |  |        this.offset.y = e.clientY - Number(this.styleObject.top.replace('px', ''));
 | 
											
										
											
												
													
														|  | @@ -160,7 +177,7 @@ export default {
 | 
											
												
													
														|  |          this.$set(this.styleObject, 'top', e.clientY - this.offset.y + 'px')
 |  |          this.$set(this.styleObject, 'top', e.clientY - this.offset.y + 'px')
 | 
											
												
													
														|  |        }
 |  |        }
 | 
											
												
													
														|  |      },
 |  |      },
 | 
											
												
													
														|  | -    stopDrag() {
 |  | 
 | 
											
												
													
														|  | 
 |  | +    stopDrag(e) {
 | 
											
												
													
														|  |        console.log("鼠标抬起事件=====")
 |  |        console.log("鼠标抬起事件=====")
 | 
											
												
													
														|  |        this.dragging = false;
 |  |        this.dragging = false;
 | 
											
												
													
														|  |      }
 |  |      }
 | 
											
										
											
												
													
														|  | @@ -171,9 +188,11 @@ export default {
 | 
											
												
													
														|  |          let list =this.value.split(',')
 |  |          let list =this.value.split(',')
 | 
											
												
													
														|  |          this.spanStyle.left = list[0] + "px"
 |  |          this.spanStyle.left = list[0] + "px"
 | 
											
												
													
														|  |          this.spanStyle.top = list[1] + "px"
 |  |          this.spanStyle.top = list[1] + "px"
 | 
											
												
													
														|  | 
 |  | +        this.spanStyle.display = 'inline-block'
 | 
											
												
													
														|  |        }else {
 |  |        }else {
 | 
											
												
													
														|  |          this.spanStyle.left = "-100px"
 |  |          this.spanStyle.left = "-100px"
 | 
											
												
													
														|  |          this.spanStyle.top = "-100px"
 |  |          this.spanStyle.top = "-100px"
 | 
											
												
													
														|  | 
 |  | +        this.spanStyle.display = 'none'
 | 
											
												
													
														|  |        }
 |  |        }
 | 
											
												
													
														|  |      }
 |  |      }
 | 
											
												
													
														|  |    }
 |  |    }
 | 
											
										
											
												
													
														|  | @@ -197,10 +216,11 @@ export default {
 | 
											
												
													
														|  |  #preview {
 |  |  #preview {
 | 
											
												
													
														|  |    width: 100%;
 |  |    width: 100%;
 | 
											
												
													
														|  |    height: 100%;
 |  |    height: 100%;
 | 
											
												
													
														|  | -  /* transform: scale(var(--scale-value)); */
 |  | 
 | 
											
												
													
														|  | 
 |  | +  transform: scale(var(--scale-value));
 | 
											
												
													
														|  |    /* background: linear-gradient(to right, red , blue); */
 |  |    /* background: linear-gradient(to right, red , blue); */
 | 
											
												
													
														|  |    /* cursor: move;
 |  |    /* cursor: move;
 | 
											
												
													
														|  |          user-select: none; */
 |  |          user-select: none; */
 | 
											
												
													
														|  | 
 |  | +  user-select: none;
 | 
											
												
													
														|  |  }
 |  |  }
 | 
											
												
													
														|  |  
 |  |  
 | 
											
												
													
														|  |  #image {
 |  |  #image {
 | 
											
										
											
												
													
														|  | @@ -208,5 +228,6 @@ export default {
 | 
											
												
													
														|  |    height: 100%;
 |  |    height: 100%;
 | 
											
												
													
														|  |    transition: transform 0.2s;
 |  |    transition: transform 0.2s;
 | 
											
												
													
														|  |    transform-origin: 0 0;
 |  |    transform-origin: 0 0;
 | 
											
												
													
														|  | 
 |  | +  user-select: none;
 | 
											
												
													
														|  |  }
 |  |  }
 | 
											
												
													
														|  |  </style>
 |  |  </style>
 |