【问题标题】：Raphael-free-transform looses scale valueRaphael-free-transform 失去尺度值
【发布时间】：2014-01-22 16:25:49
【问题描述】：

在以下代码中，square 对象的重新缩放出错：
单击按钮后（应用 y 比例因子并从我们的 square 中创建一个矩形）对象显示正确，但如果您触摸手柄，则之前的比例值会擦除并再次显示方形。

我希望能够在代码中制作矩形，然后使用句柄统一重新缩放它。如何解决这个问题？

<html>
<head>
    <title></title>
    <script src="scripts/raphael.js"></script>
    <script src="scripts/raphael.free_transform.js"></script>
</head>
<body>
    <button id="btn" onclick="onClick()">apply scale</button>
    <script>
        var r = Raphael(100, 0 , 300, 400);
        var square = r.rect(100,150, 100, 100).attr({ fill: "#aaa", stroke: "black", opacity: 0.5 });

        var ft = r.freeTransform(square, {}, function () {});
        ft.setOpts({
            attrs: { fill: 'white', stroke: '#000' },
            drag: false,
            keepRatio: ['axisX', 'axisY'],
            size: 5,
            scale: ['axisX', 'axisY'],
            rotate:false
        });

        function onClick() {
            ft.attrs.scale.y = 2;
            ft.apply();
        }
    </script>

</body>
</html>

jsfiddle 是here

【问题讨论】：

可以放在 jsfiddle 上吗？
@Ian，查看问题更新
来自 raw.github 的外部资源不起作用我把它放在代码中查看更新的 js fiddle jsfiddle.net/Z2cqT/1。它给了setOpts undefined error。除了那个手柄似乎工作正常
@eguneys，我重复了你将库复制到源代码区域的技巧，但我有另一个错误：jsfiddle.net/qvatra/Z2cqT/4愚蠢...

标签： javascript html plugins raphael transform

【解决方案1】：

当您将 y 缩放 2 时，它违反了keepRatio: ['axisX', 'axisY'] 规则。所以要么你改变

`keepRatio: false,`

或者你通过保持比例来扩展。

编辑：

您可以在单击按钮时通过ft.attrs.ratio = 1/2 更改纵横比。查看更新的 js fiddle

为了让 js.fiddle 正常工作，我添加了 r.setViewBox(0, 0, 300, 400, true); 这一行 http://jsfiddle.net/Z2cqT/18/

【讨论】：

找到了这个geekdave.com/2013/06/19/linking-raw-github-files-from-jsfiddle 。它导致jsfiddle.net/qvatra/Z2cqT/10 仍然不起作用，但由于另一个问题
是的。干得好！但这并没有解决我的问题.. 在这个jsfiddle.net/qvatra/Z2cqT/17 中，您可以首先使用方形手柄在 y 方向缩放元素，然后使用圆形手柄均匀缩放。它有效，是的。但是，当我尝试通过按下按钮应用 y 缩放然后触摸圆圈时，缩放值会被擦除。
我不明白你真正需要什么，你可以通过代码和转换句柄来控制比例，也许试试这个ft.attrs.scale.y = ft.attrs.scale.y * 2;
我想要非常简单的功能：1) 使用按钮将矩形变成正方形（对 y 应用比例） 2) 能够通过拖动圆形手柄来均匀地重新缩放这个矩形。尝试在小提琴中进行操作，您会看到当您开始拖动圆形手柄时，方形再次出现但我想重新缩放矩形
这正是我的 jsfiddle 中发生的事情。如果您想不断将大小翻倍，请使用ft.attrs.scale.y = ft.attrs.scale.y * 2