search

gausszhou / vue-drag-resize-rotate

一个Vue2.0组件，支持拖拽，拉伸，旋转，放缩，自动对齐；A Component for Vue.js 2.0;
https://gausszhou.github.io/vue-drag-resize-rotate/
MIT License
134 stars 39 forks source link

旋转后拖拽超出一定范围，缩放顶点变化 #13

Closed k186 closed 2 years ago

k186 commented 2 years ago

开启旋转后，缩放，在一定范围内能正常锁定顶点缩放，但是超出一定范围后，缩放顶点会变动，造成缩放同时整体结构偏移；gitbook 里面就能复现 https://www.gausszhou.top/vue-drag-resize-rotate/#/basic/basic-with-rotatable；

k186 commented 2 years ago

建议不用记录锁死原点，直接拖锚点的时候就设置 transform-origin 值为 拖拽的点的对立点 就可以满足锁死缩放点了 image

gausszhou commented 2 years ago

开启旋转后，缩放，在一定范围内能正常锁定顶点缩放，但是超出一定范围后，缩放顶点会变动，造成缩放同时整体结构偏移；gitbook 里面就能复现 https://www.gausszhou.top/vue-drag-resize-rotate/#/basic/basic-with-rotatable；

这个应该是达到父元素大小了，导致无法resize

k186 commented 2 years ago

开启旋转后，缩放，在一定范围内能正常锁定顶点缩放，但是超出一定范围后，缩放顶点会变动，造成缩放同时整体结构偏移；gitbook 里面就能复现 https://www.gausszhou.top/vue-drag-resize-rotate/#/basic/basic-with-rotatable；

这个应该是达到父元素大小了，导致无法resize

的确是parent 那个限制，放开就可以了；3Q

gausszhou commented 2 years ago

建议不用记录锁死原点，直接拖锚点的时候就设置 transform-origin 值为 拖拽的点的对立点 就可以满足锁死缩放点了 image

谢谢您的建议！

直接改变transform-origin，会导致原有的计算方式失效，原因是坐标是通过角度+旋转中心点计算的。这样每次修改origin都需要重新计算。暂时没有好的思路还不会改动这一块，之后有时间会考虑用代数的方式来重构。

k186 commented 2 years ago

https://github.com/shenhudong/snapping-demo/wiki/corner-handle#%E8%87%AA%E7%94%B1%E4%BC%B8%E7%BC%A9 这个有详细实现说明，今天找了半天找到了，19年看到过当时没存

k186 commented 2 years ago

https://github.com/developergovindgupta/move-rotate-resizer 这个哥们用的就是我说的那个方法重设origin

gausszhou commented 2 years ago

https://github.com/developergovindgupta/move-rotate-resizer 这个哥们用的就是我说的那个方法重设origin

嗯，谢谢，我看下

主要是我计划的是需要传出的值符合一个固定的规则，导入同一份数据，渲染结果要是一致的才行，这样可能需要将origin的值也进行导出才行

k186 commented 2 years ago

组内同事提了另外一种方法，坐标点和旋转点都为图形的中心点，这样旋转缩放都是以中心点为缩放中心，目前看ps这些设计软件默认都是这种实现形式，不过这种实现带来的问题就是实际渲染中有些功能实现，比如参考线的实现可能要考虑获取的坐标是实际4个顶点的坐标