Pārlūkot izejas kodu

Set handle left/top as percentages so that they adjust to changes in
zoom level automatically.

Andrew Klopper 6 gadi atpakaļ
vecāks
revīzija
437270eab9
1 mainītis faili ar 6 papildinājumiem un 9 dzēšanām
  1. 6 9
      index.html

+ 6 - 9
index.html

164
                                 context.stroke();
164
                                 context.stroke();
165
                             }
165
                             }
166
 
166
 
167
-                            function repositionHandle(handle) {
168
-                                let scale = scaledWidth / imageWidth;
169
-                                handle.style.left = (parseFloat(handle.dataset.left) * scale) + 'px';
170
-                                handle.style.top = (parseFloat(handle.dataset.top) * scale) + 'px';
171
-                            }
172
-
173
                             function resize() {
167
                             function resize() {
174
                                 sourceImage.style.width = scaledWidth + 'px';
168
                                 sourceImage.style.width = scaledWidth + 'px';
175
-                                handles.forEach(repositionHandle);
176
                                 redrawOverlay();
169
                                 redrawOverlay();
177
                             }
170
                             }
178
 
171
 
172
+                            function repositionHandle(handle) {
173
+                                handle.style.left = (parseFloat(handle.dataset.left) / imageWidth * 100) + '%';
174
+                                handle.style.top = (parseFloat(handle.dataset.top) / imageHeight * 100) + '%';
175
+                            }
176
+
179
                             function dragMoveListener(event) {
177
                             function dragMoveListener(event) {
180
                                 let target = event.target;
178
                                 let target = event.target;
181
                                 let scale = scaledWidth / imageWidth;
179
                                 let scale = scaledWidth / imageWidth;
270
                                 handle.className = 'handle';
268
                                 handle.className = 'handle';
271
                                 handle.dataset.left = corner.x;
269
                                 handle.dataset.left = corner.x;
272
                                 handle.dataset.top = corner.y;
270
                                 handle.dataset.top = corner.y;
273
-                                handle.style.left = handle.dataset.left + 'px';
274
-                                handle.style.top = handle.dataset.top + 'px';
271
+                                repositionHandle(handle);
275
                                 sourceImage.appendChild(handle);
272
                                 sourceImage.appendChild(handle);
276
                                 interact(handle).draggable({
273
                                 interact(handle).draggable({
277
                                     onmove: dragMoveListener
274
                                     onmove: dragMoveListener