如图所示:没有旋转的时候拖拽四个控点进行缩放是正确的,但是旋转之后,再进行缩放,缩放的方向就不对了。求解决这个问题的思路。缩放我是改变left,top值做的、旋转是用CSS3的matrix做的,还有就是旋转之后,四个角的cursor也不对了
1
zoverdoser 2015-04-24 11:08:24 +08:00 1
transform-origin: center;?
|
2
bsbgong 2015-04-24 11:39:51 +08:00
就是楼上说的
|
3
adspe 2015-04-24 11:46:56 +08:00
transform-origin:50% 50%;
|
4
ffx0s OP @zoverdoser
@bsbgong 就像PS里的缩放和旋转一样,假如旋转了45度角后,再点击右下角的控点进行缩放,此时是以右下角正对角的控点为原点进行缩放的。transform-origin: center这个应该不行吧。感觉用这个会更复杂。 |
5
bsbgong 2015-04-24 15:53:32 +08:00
@ffx0s
根据你的问题描述,是元素执行变换时的原点问题 那就是使用transform-origin这个属性 具体设置的话,根据你的设计,是保存了四个角的坐标并绑定了拖拽事件的 那么就在事件中设置元素的属性: transform: scale transform-origin: 对角点的坐标 |
6
ffx0s OP @bsbgong http://jsfiddle.net/fabricjs/6ydPq/ 我想要的效果是这样的,当然他这个是用canvas做的。我现在缩放改变的是width,height,left,和top。没有用scale。实际效果和这个网站一样的: http://www.polyvore.com/cgi/app
|
7
bsbgong 2015-04-24 19:50:51 +08:00
@ffx0s
http://jsfiddle.net/fabricjs/6ydPq/ 我看这个里面也是设置的origin 基于你现有的left/top的方案,我觉得不可行。因为只靠这一类CSS属性的话,你无法控制浏览器绘制一个元素的原点,没有这个接口。 建议换用transform。 1. transform在动画性能上更高 2. origin属性可以简单地解决你的难点 |
8
ffx0s OP @bsbgong http://www.webfed.cn/static/webapp/static/images/3.gif 用scale缩放的话,控点也会变小。
|