|
|
@@ -1,128 +1,212 @@
|
|
|
<template>
|
|
|
- <div id="container" @mousedown="startDrag" @mousemove="doDrag" @mouseup="stopDrag">
|
|
|
- <div id="preview" @wheel="wheelFun" @click="previewOnclick" :style="styleObject">
|
|
|
+ <div id="container-box">
|
|
|
+ <div>
|
|
|
+ <div>
|
|
|
+ <el-radio-group v-model="radio" @input="addEvent">
|
|
|
+ <el-radio :label="1">拖动</el-radio>
|
|
|
+ <el-radio :label="2">放大和绘点</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </div>
|
|
|
+ <!-- <div style="width: 200px;">
|
|
|
+ <el-slider v-model="value1" @click="inputValue" :step="0.01" :max="1"></el-slider>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div id="container">
|
|
|
+ <div id="preview" :style="styleObject">
|
|
|
<img :src="imageUrl" id="image" />
|
|
|
<span :style="spanStyle"></span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </template>
|
|
|
-
|
|
|
- <script>
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- preview: null,
|
|
|
- container: null,
|
|
|
- image: null,
|
|
|
- factor: {
|
|
|
- scale: 1,
|
|
|
- },
|
|
|
- spanStyle: {
|
|
|
- width: '10px',
|
|
|
- height: '10px',
|
|
|
- borderRadius: '5px',
|
|
|
- background: 'red',
|
|
|
- position: 'absolute',
|
|
|
- left: '-10px',
|
|
|
- top: '-10px',
|
|
|
- transform: 'translate(-50%, -50%)'
|
|
|
- },
|
|
|
- imageUrl: null,
|
|
|
- dragging: false,
|
|
|
- offset: { x: 0, y: 0 },
|
|
|
- styleObject: {
|
|
|
- position: 'absolute',
|
|
|
- top: '0',
|
|
|
- left: '0'
|
|
|
- }
|
|
|
- };
|
|
|
+ </div>
|
|
|
+
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ props: {
|
|
|
+ value: {
|
|
|
+ type: String,
|
|
|
+ default: ""
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ preview: null,
|
|
|
+ container: null,
|
|
|
+ image: null,
|
|
|
+ factor: {
|
|
|
+ scale: 1,
|
|
|
+ },
|
|
|
+ spanStyle: {
|
|
|
+ width: '10px',
|
|
|
+ height: '10px',
|
|
|
+ borderRadius: '5px',
|
|
|
+ background: 'red',
|
|
|
+ position: 'absolute',
|
|
|
+ left: '-10px',
|
|
|
+ top: '-10px',
|
|
|
+ transform: 'translate(-50%, -50%)'
|
|
|
+ },
|
|
|
+ imageUrl: null,
|
|
|
+
|
|
|
+ offset: { x: 0, y: 0 },
|
|
|
+ styleObject: {
|
|
|
+ position: 'absolute',
|
|
|
+ top: '0',
|
|
|
+ left: '0'
|
|
|
+ },
|
|
|
+ value1: 0.9,
|
|
|
+
|
|
|
+ radio: null,
|
|
|
+ // 拖动事件
|
|
|
+ dragging: false,
|
|
|
+ isDragging: false,
|
|
|
+
|
|
|
+ // 滚动缩放事件
|
|
|
+ isZoom: false
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.preview = document.querySelector("#preview");
|
|
|
+ this.container = document.getElementById("container");
|
|
|
+ this.image = document.getElementById("image");
|
|
|
+ },
|
|
|
+ activated() {
|
|
|
+ console.log("dsffadsfasdf===")
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ addEvent(type) {
|
|
|
+ console.log(type)
|
|
|
+ if (this.radio == 1) {
|
|
|
+ this.container.addEventListener("mousedown", this.startDrag) // 鼠标按下
|
|
|
+ this.container.addEventListener("mousemove", this.doDrag) // 鼠标移动
|
|
|
+ this.container.addEventListener("mouseup", this.stopDrag) // 鼠标松开
|
|
|
+ this.image.addEventListener("mouseup", this.stopDrag) // 鼠标松开
|
|
|
+ this.preview.addEventListener("mouseup", this.stopDrag) // 鼠标按下
|
|
|
+ } else {
|
|
|
+ this.container.removeEventListener("mousedown", this.startDrag) // 鼠标按下
|
|
|
+ this.container.removeEventListener("mousemove", this.doDrag) // 鼠标移动
|
|
|
+ this.container.removeEventListener("mouseup", this.stopDrag) // 鼠标松开
|
|
|
+ this.image.removeEventListener("mouseup", this.stopDrag) // 鼠标松开
|
|
|
+ this.preview.removeEventListener("mouseup", this.stopDrag) // 鼠标按下
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.radio == 2) {
|
|
|
+ this.preview.addEventListener("wheel", this.wheelFun) // 鼠标按下
|
|
|
+ this.preview.addEventListener("click", this.previewOnclick) // 鼠标移动
|
|
|
+ } else {
|
|
|
+ this.preview.removeEventListener("wheel", this.wheelFun) // 鼠标按下
|
|
|
+ this.preview.removeEventListener("click", this.previewOnclick) // 鼠标移动
|
|
|
+ }
|
|
|
},
|
|
|
- mounted() {
|
|
|
- this.preview = document.querySelector("#preview");
|
|
|
- this.container = document.getElementById("container");
|
|
|
- this.image = document.getElementById("image");
|
|
|
+ initData(url) {
|
|
|
+ if(!url) return
|
|
|
+ this.imageUrl = url
|
|
|
+ let image = new Image();
|
|
|
+ image.src = url;
|
|
|
+ console.log("url====", url)
|
|
|
+ // 方式二、加载事件中获取
|
|
|
+ image.onload = () => {
|
|
|
+ console.log("sdfdsafds====", image.width)
|
|
|
+ this.image.style.width = image.width + 'px'
|
|
|
+ this.image.style.height = image.height + 'px'
|
|
|
+ this.preview.style.width = image.width + 'px'
|
|
|
+ this.preview.style.height = image.height + 'px'
|
|
|
+ this.addEvent()
|
|
|
+ };
|
|
|
},
|
|
|
- methods: {
|
|
|
- initData(url){
|
|
|
- this.imageUrl = url
|
|
|
- let image = new Image();
|
|
|
- image.src = url;
|
|
|
- console.log("url====",url)
|
|
|
- // 方式二、加载事件中获取
|
|
|
- image.onload = () => {
|
|
|
- console.log("sdfdsafds====",image.width)
|
|
|
- this.image.style.width = image.width + 'px'
|
|
|
- this.image.style.height = image.height + 'px'
|
|
|
- };
|
|
|
- },
|
|
|
- previewOnclick(e) {
|
|
|
- const needWidth =
|
|
|
- e.offsetX / (this.container.clientWidth / this.image.naturalWidth);
|
|
|
- const needHeight =
|
|
|
- e.offsetY / (this.container.clientHeight / this.image.naturalHeight);
|
|
|
+ previewOnclick(e) {
|
|
|
+ const needWidth =
|
|
|
+ e.offsetX / (this.container.clientWidth / this.image.naturalWidth);
|
|
|
+ const needHeight =
|
|
|
+ e.offsetY / (this.container.clientHeight / this.image.naturalHeight);
|
|
|
|
|
|
- const left = needWidth * (this.container.clientWidth / this.image.naturalWidth);
|
|
|
- const top = needHeight * (this.container.clientHeight / this.image.naturalHeight);
|
|
|
- this.spanStyle.left = left + "px"
|
|
|
- this.spanStyle.top = top + "px"
|
|
|
- },
|
|
|
- wheelFun(event) {
|
|
|
- //event.preventDefault();
|
|
|
+ const left = needWidth * (this.container.clientWidth / this.image.naturalWidth);
|
|
|
+ const top = needHeight * (this.container.clientHeight / this.image.naturalHeight);
|
|
|
+ this.spanStyle.left = left + "px"
|
|
|
+ this.spanStyle.top = top + "px"
|
|
|
+ this.$emit("input", left+ ',' + top);
|
|
|
+ },
|
|
|
+ wheelFun(event) {
|
|
|
+ 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.2 : -0.2;
|
|
|
- this.factor.scale += scaleVal;
|
|
|
- if (this.factor.scale < 1) {
|
|
|
- this.factor = {
|
|
|
- scale: 1,
|
|
|
- };
|
|
|
- }
|
|
|
+ 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;
|
|
|
+ }
|
|
|
|
|
|
- this.preview.style.transformOrigin = `${offsetX * 100}% ${offsetY * 100}%`;
|
|
|
- this.preview.style.transform = `scale(${this.factor.scale})`;
|
|
|
- },
|
|
|
- startDrag(e) {
|
|
|
- this.dragging = true;
|
|
|
- this.offset.x = e.clientX - Number(this.styleObject.left.replace('px',''));
|
|
|
- this.offset.y = e.clientY - Number(this.styleObject.top.replace('px',''));
|
|
|
- },
|
|
|
- doDrag(e) {
|
|
|
- if (this.dragging) {
|
|
|
- this.$set(this.styleObject,'left',e.clientX - this.offset.x + 'px')
|
|
|
- this.$set(this.styleObject,'top',e.clientY - this.offset.y + 'px')
|
|
|
- }
|
|
|
- },
|
|
|
- stopDrag() {
|
|
|
- this.dragging = false;
|
|
|
- }
|
|
|
+ this.preview.style.transformOrigin = `${offsetX * 100}% ${offsetY * 100}%`;
|
|
|
+ this.preview.style.transform = `scale(${this.factor.scale})`;
|
|
|
+ },
|
|
|
+ inputValue(value1) {
|
|
|
+ console.log("value1====", value1)
|
|
|
+ // this.preview.style.transform = `scale(${value1})`;
|
|
|
+ },
|
|
|
+ startDrag(e) {
|
|
|
+ this.dragging = true;
|
|
|
+ this.offset.x = e.clientX - Number(this.styleObject.left.replace('px', ''));
|
|
|
+ this.offset.y = e.clientY - Number(this.styleObject.top.replace('px', ''));
|
|
|
+ },
|
|
|
+ doDrag(e) {
|
|
|
+ if (this.dragging) {
|
|
|
+ this.$set(this.styleObject, 'left', e.clientX - this.offset.x + 'px')
|
|
|
+ this.$set(this.styleObject, 'top', e.clientY - this.offset.y + 'px')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ stopDrag() {
|
|
|
+ console.log("鼠标抬起事件=====")
|
|
|
+ this.dragging = false;
|
|
|
}
|
|
|
- };
|
|
|
- </script>
|
|
|
-
|
|
|
- <style>
|
|
|
- #container {
|
|
|
- width: 100%;
|
|
|
- height: 500px;
|
|
|
- position: relative;
|
|
|
- overflow: hidden;
|
|
|
- border: 1px solid #ccc;
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ value() {
|
|
|
+ if(this.value) {
|
|
|
+ let list =this.value.split(',')
|
|
|
+ this.spanStyle.left = list[0] + "px"
|
|
|
+ this.spanStyle.top = list[1] + "px"
|
|
|
+ }else {
|
|
|
+ this.spanStyle.left = "-100px"
|
|
|
+ this.spanStyle.top = "-100px"
|
|
|
}
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+#container-box {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
|
|
|
- #preview {
|
|
|
- width: 500px;
|
|
|
- height: 500px;
|
|
|
- background: linear-gradient(to right, red , blue);
|
|
|
- /* cursor: move;
|
|
|
+#container {
|
|
|
+ width: 100%;
|
|
|
+ height: 500px;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ z-index: 99;
|
|
|
+}
|
|
|
+
|
|
|
+#preview {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ /* transform: scale(var(--scale-value)); */
|
|
|
+ /* background: linear-gradient(to right, red , blue); */
|
|
|
+ /* cursor: move;
|
|
|
user-select: none; */
|
|
|
- }
|
|
|
+}
|
|
|
|
|
|
- #image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- transition: transform 0.2s;
|
|
|
- transform-origin: 0 0;
|
|
|
- }
|
|
|
- </style>
|
|
|
+#image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ transition: transform 0.2s;
|
|
|
+ transform-origin: 0 0;
|
|
|
+}
|
|
|
+</style>
|
