V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
ffx0s
V2EX  ›  JavaScript

css3 旋转和缩放问题

  •  
  •   ffx0s · 2015-04-24 10:45:58 +08:00 · 3503 次点击
    这是一个创建于 3483 天前的主题,其中的信息可能已经有所发展或是发生改变。

    此处输入图片的描述如图所示:没有旋转的时候拖拽四个控点进行缩放是正确的,但是旋转之后,再进行缩放,缩放的方向就不对了。求解决这个问题的思路。缩放我是改变left,top值做的、旋转是用CSS3的matrix做的,还有就是旋转之后,四个角的cursor也不对了

    第 1 条附言  ·  2015-04-24 20:54:43 +08:00
    ![](http://www.webfed.cn/static/webapp/static/images/3.gif)
    8 条回复    2015-04-24 20:55:38 +08:00
    zoverdoser
        1
    zoverdoser  
       2015-04-24 11:08:24 +08:00   ❤️ 1
    transform-origin: center;?
    bsbgong
        2
    bsbgong  
       2015-04-24 11:39:51 +08:00
    就是楼上说的
    adspe
        3
    adspe  
       2015-04-24 11:46:56 +08:00
    transform-origin:50% 50%;
    ffx0s
        4
    ffx0s  
    OP
       2015-04-24 12:00:19 +08:00
    @zoverdoser
    @bsbgong
    就像PS里的缩放和旋转一样,假如旋转了45度角后,再点击右下角的控点进行缩放,此时是以右下角正对角的控点为原点进行缩放的。transform-origin: center这个应该不行吧。感觉用这个会更复杂。
    bsbgong
        5
    bsbgong  
       2015-04-24 15:53:32 +08:00
    @ffx0s
    根据你的问题描述,是元素执行变换时的原点问题
    那就是使用transform-origin这个属性
    具体设置的话,根据你的设计,是保存了四个角的坐标并绑定了拖拽事件的
    那么就在事件中设置元素的属性:
    transform: scale
    transform-origin: 对角点的坐标
    ffx0s
        6
    ffx0s  
    OP
       2015-04-24 16:03:16 +08:00
    @bsbgong http://jsfiddle.net/fabricjs/6ydPq/ 我想要的效果是这样的,当然他这个是用canvas做的。我现在缩放改变的是width,height,left,和top。没有用scale。实际效果和这个网站一样的: http://www.polyvore.com/cgi/app
    bsbgong
        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属性可以简单地解决你的难点
    ffx0s
        8
    ffx0s  
    OP
       2015-04-24 20:55:38 +08:00
    @bsbgong http://www.webfed.cn/static/webapp/static/images/3.gif 用scale缩放的话,控点也会变小。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1068 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 19:53 · PVG 03:53 · LAX 11:53 · JFK 14:53
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.