推荐关注 Meteor JSLint - a Javascript code quality tool jsFiddle D3.js WebStorm 推荐书目 Javascript 权威指南第 5 版
Closure: The Definitive Guide
Closure: The Definitive Guide 
这是一个创建于 3829 天前的主题，其中的信息可能已经有所发展或是发生改变。
如图所示:没有旋转的时候拖拽四个控点进行缩放是正确的，但是旋转之后，再进行缩放，缩放的方向就不对了。求解决这个问题的思路。缩放我是改变left，top值做的、旋转是用CSS3的matrix做的，还有就是旋转之后，四个角的cursor也不对了
第 1 条附言 2015-04-24 20:54:43 +08:00
 | 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缩放的话，控点也会变小。 |
Select Language