gpt4 book ai didi

javascript - Raphael-free-transform 丢失比例值

转载 作者:行者123 更新时间:2023-11-30 12:50:00 25 4
gpt4 key购买 nike

在以下代码中,square 对象的重新缩放出错了:
单击按钮(应用 y 比例因子并从我们的 square 中创建一个矩形)后,对象显示正确,但是如果您在之后触摸 handle ,之前的比例值将被删除并再次显示正方形。

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

<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

最佳答案

当您将 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/

关于javascript - Raphael-free-transform 丢失比例值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21288434/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com