编辑：

Question

在以下代码中，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

Answer 1

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

`keepRatio: false,`

或者通过保持比例来缩放。

编辑：

您可以在按钮点击时按ft.attrs.ratio = 1/2更改宽高比。看到更新的js小提琴

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

拉斐尔自由变换失去了规模价值

1 个答案:

编辑：