|
|
@@ -0,0 +1,128 @@
|
|
|
+<template>
|
|
|
+ <div id="container" @mousedown="startDrag" @mousemove="doDrag" @mouseup="stopDrag">
|
|
|
+ <div id="preview" @wheel="wheelFun" @click="previewOnclick" :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'
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.preview = document.querySelector("#preview");
|
|
|
+ this.container = document.getElementById("container");
|
|
|
+ this.image = document.getElementById("image");
|
|
|
+ },
|
|
|
+ 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);
|
|
|
+
|
|
|
+ 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 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,
|
|
|
+ };
|
|
|
+ }
|
|
|
+
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+ </script>
|
|
|
+
|
|
|
+ <style>
|
|
|
+ #container {
|
|
|
+ width: 100%;
|
|
|
+ height: 500px;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ }
|
|
|
+
|
|
|
+ #preview {
|
|
|
+ width: 500px;
|
|
|
+ height: 500px;
|
|
|
+ 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>
|
