| 254 | }; |
| 255 | |
| 256 | function handlerScale (e, changeProperty, box) { |
| 257 | // 缩放旋转公共函数 |
| 258 | isChangeLeft = false // 小圆点默认都不实时更新 |
| 259 | isChangeTop = false |
| 260 | if (changeProperty.includes('left')) { |
| 261 | isChangeLeft = true |
| 262 | } else if (changeProperty.includes('top' || changeProperty.includes('topHeight'))) { |
| 263 | isChangeTop = true |
| 264 | } |
| 265 | const posix = { |
| 266 | w: box.width(), |
| 267 | h: box.height(), |
| 268 | x: e.pageX, |
| 269 | y: e.pageY, |
| 270 | r: changeProperty.includes('transform') && Number(box[0].children[0].children[0].style.transform.split('(')[1].replace('deg)', '')), |
| 271 | }; |
| 272 | |
| 273 | posix.x = Math.round(posix.x / vm.zoom); |
| 274 | posix.y = Math.round(posix.y / vm.zoom); |
| 275 | $.extend(document, { |
| 276 | move: true, |
| 277 | call_down (e) { |
| 278 | requestAnimationFrame(() => { |
| 279 | const css = {} |
| 280 | changeProperty.forEach(item => { |
| 281 | switch (item) { |
| 282 | case 'width': css[item] = Math.max(30, e.pageX - posix.x + posix.w); break; |
| 283 | case 'leftWidth': css.width = Math.max(30, posix.x + posix.w - e.pageX); break; // 这个是左侧圆点的计算方式 |
| 284 | case 'height': css[item] = Math.max(30, e.pageY - posix.y + posix.h); break; |
| 285 | case 'topHeight': css.height = Math.max(30, posix.y + posix.h - e.pageY); break; // 这个是顶部圆点的计算方式 |
| 286 | // case 'left': css[item] = posix.x + posix.w - e.pageX > 30 && e.pageX; break; |
| 287 | // case 'top': css[item] = posix.y + posix.h - e.pageY > 30 && e.pageY; break; |
| 288 | case 'left': css.transform = vm.setTranslate3d(box[0].style.transform, posix.x + posix.w - e.pageX > 30 && e.pageX); break; |
| 289 | case 'top': css.transform = vm.setTranslate3d(box[0].style.transform, item, posix.y + posix.h - e.pageY > 30 && e.pageY); break; |
| 290 | case 'transform': css[item] = `rotate(${(posix.r + ((e.pageX / posix.x) - 1.35) * 100) % 360}deg)`; break; |
| 291 | default: break; |
| 292 | } |
| 293 | }) |
| 294 | if (changeProperty.includes('transform')) { // 旋转单独处理 |
| 295 | box[0].children[0].children[0].style.transform = css.transform |
| 296 | } else { |
| 297 | box.css(css); |
| 298 | } |
| 299 | }) |
| 300 | }, |
| 301 | }); |
| 302 | return false; |
| 303 | } |