JS_根据鼠标位置缩放元素、拖拽
# 实现原理
实现大概思路是通过transform
的scale
属性实现元素缩放,通过translate
设置偏移,transform-origin
设置缩放圆点
translate
用translate
的主要原因是因为,他的值是相对于父元素的相对位置,方便后面缩放偏移量的计算,而top
,left
的值是相对于目标元素而言,所以当目标元素的高度或宽度高于容器的高度或宽度时,他的值为负数,不方便计算目标物距离容器左上角的距离,不方便计算偏移量。
scale scale
缩放好处在于不需要考虑被缩放物的内部布局,width
、height
在缩放div
时就不适用了,在缩放图片时没有影响
tranform-origin 在本文中主要作用于元素缩放圆点
计算偏移量公式 如下计算公式,其实就相当于根据鼠标当前位置进行中心缩放 当前鼠标 X 轴的坐标到目标元素左上角的距离 = 相当于X轴的半径 当前鼠标 Y 轴的坐标到目标元素左上角的距离 = 相当于Y轴的半径
translateX-=([缩放后的宽度-缩放前的宽度]*([当前鼠标 X 轴的坐标到目标元素左上角的距离]/缩放前的宽度))
translateY-=([缩放后的高度-缩放前的高度]*([当前鼠标 Y 轴的坐标到目标元素左上角的距离]/缩放前的高度))
1
2
2
# 实例代码
<div class="container">
<div class="draw"></div>
</div>
1
2
3
2
3
const mousewheelDragZoom = ({ target, diff }) => {
/**
* 判断传入参数是否是HTML DOM
*/
let isElement = (obj) => {
return typeof HTMLElement === "object"
? obj instanceof HTMLElement
: !!(
obj &&
typeof obj === "object" &&
(obj.nodeType === 1 || obj.nodeType === 9) &&
typeof obj.nodeName === "string"
)
}
/**
* 被拖拽物、被缩放元素
*/
let drawEl = target;
/**
* 如果传入参数不是一个HTML DOM,则查找目标元素
*/
if (!isElement(target)) {
drawEl = document.querySelector(target)
}
/**
* 父元素:容器
*/
const parent = drawEl.parentElement
/**
* 获取父元素的大小及其相对于视口的位置。
*/
const parentRect = parent.getBoundingClientRect()
/**
* 鼠标相对于目标物缩放点的距离
*/
let diffX = 0,
diffY = 0
/**
* 是否正在拖拽
*/
let isDrawing = false
/**
* 鼠标当前相对于父容器的坐标
*/
let mouseX = 0,
mouseY = 0
/**
* 偏移坐标,缩放比例
*/
let translateX = 0,
translateY = 0
let scale = 1
/**
* 一次缩放的比例
*/
diff = diff || 0.01;
/**
* 滚轮滚动方向是否向上
* 向上,缩小
* 向下,放大
*/
let isUpward = false
/**
* 刷新鼠标距离目标元素缩放点的距离
*/
let refreshMousePositionDiffValue = () => {
diffX = mouseX - translateX
diffY = mouseY - translateY
}
/**
* 更新样式
*/
let refreshTargetStyle = () => {
drawEl.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scale})`
parent.style.cursor = isDrawing ? "move" : "default"
}
/**
* 鼠标移动事件
*/
parent.addEventListener("mousemove", (e) => {
mouseX = e.x - parentRect.left
mouseY = e.y - parentRect.top
if (isDrawing) {
translateX = mouseX - diffX
translateY = mouseY - diffY
refreshTargetStyle()
}
})
/**
* 鼠标按下事件
*/
parent.addEventListener("mousedown", () => {
refreshMousePositionDiffValue()
isDrawing = true
refreshTargetStyle()
})
/**
* 鼠标抬起事件
*/
window.addEventListener("mouseup", () => {
isDrawing = false
refreshTargetStyle()
})
/**
* 鼠标滚动事件
*/
let mouseZoom = (e) => {
e = e || window.event
if (e.wheelDelta) {
isUpward = e.wheelDelta > 0
} else if (e.detail) {
isUpward = e.detail < 0
}
let oldWidth = scale * drawEl.clientWidth
let oldHeight = scale * drawEl.clientHeight
if (isUpward) {
scale += diff
} else if (!isUpward && scale > 0.05) {
scale -= diff
}
let newWidth = scale * drawEl.clientWidth
let newHeight = scale * drawEl.clientHeight
//刷新鼠标距离目标元素缩放点坐标
refreshMousePositionDiffValue()
/**
* 重新计算缩放偏移量
*/
translateX -= (newWidth - oldWidth) * (diffX / oldWidth)
translateY -= (newHeight - oldHeight) * (diffY / oldHeight)
refreshTargetStyle()
}
/**
* 鼠标滚轮兼容
*/
/*IE、Opera注册事件*/
if (document.attachEvent) {
parent.attachEvent("onmousewheel", mouseZoom)
}
//Firefox使用addEventListener添加滚轮事件
if (document.addEventListener) {
parent.addEventListener("DOMMouseScroll", mouseZoom, false)
}
//Safari与Chrome属于同一类型
window.onmousewheel = parent.onmousewheel = mouseZoom
/**
* 页面初始化
*/
/**
* 判断缩放元素高度是否高于容器高度
* 如果大于,则缩放值容器高度
*/
if (drawEl.clientHeight > parent.clientHeight) {
scale =
1 - (drawEl.clientHeight - parent.clientHeight) / drawEl.clientHeight
}
/**
* 让目标元素居中显示
*/
translateX = (parent.clientWidth - (scale * drawEl.clientWidth)) / 2
translateY = (parent.clientHeight - (scale * drawEl.clientHeight)) / 2
//设置初始样式
drawEl.style.transformOrigin = "0 0"
/**
* 当目标元素 是img时,需要禁用元素鼠标可拖拽
* div user-drag 默认是none 可以不设置
*/
drawEl.style.userDrag = 'none'
drawEl.style.webkitUserDrag = 'none';
//禁用选则,防止拖拽时出现先择元素内部元素的情况
drawEl.style.userSelect = 'none'
refreshTargetStyle()
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
# 使用方法
window.onload = function () {
let oImg = document.getElementById('oImg');
mousewheelDragZoom({ target: oImg })
};
1
2
3
4
2
3
4
上次更新: 2024/02/20, 17:31:36
- 01
- Node与GLIBC_2.27不兼容解决方案08-19
- 02
- Git清空本地文件跟踪缓存08-13