调整fabricjs Rects的宽度/高度属性答案

【问题标题】：resizing width / height properties of fabricjs Rects调整fabricjs Rects的宽度/高度属性
【发布时间】：2019-01-28 01:29:51
【问题描述】：

我正在使用 fabric.js 来定义可以调整大小的矩形区域。我想知道是否有任何方法可以设置结构，以便通过更改宽度/高度属性而不是 scaleX 和 scaleY 来调整元素的大小？

【问题讨论】：

标签： javascript fabricjs

【解决方案1】：

您可以使用object:scaling 事件。

canvas.on("object:scaling", function(e) {
    var target = e.target;
    if (!target || target.type !== 'rect') {
        return;
    }
    var sX = target.scaleX;
    var sY = target.scaleY;
    target.width *= sX;
    target.height *= sY;
    target.scaleX = 1;
    target.scaleY = 1;
});

【讨论】：

谢谢！当您在 fabric.js 中调整对象大小时，宽度和高度不会改变这一事实是如此违反直觉！
因为您认为您正在调整大小，但您正在缩放。没有写到有调整大小事件的地方，只是缩放。
使用这个时，画一个矩形，然后用中间左侧的手柄缩放它。来回拖动，您会注意到右侧在不应该移动时移动。您还可以通过将矩形的一个边缘一直拖动到另一边缘来获得奇怪的行为。
@AndreaBogazzi - 也在这里联系你
看看这个。如果您来回单击/拖动右侧中间手柄，一切都很好。对左侧中间手柄执行相同操作，您会看到右侧移动。 codepen.io/carter485/pen/eLbayb

【解决方案2】：

你应该设置脏标志，它为我解决了大部分问题：

canvas.on("object:scaling", function (e) {
            var target = e.target;
            if (!target || target.type !== 'rect') {
                return;
            }
            var sX = target.scaleX;
            var sY = target.scaleY;
            target.width *= sX;
            target.height *= sY;
            target.scaleX = 1;
            target.scaleY = 1;
            target.dirty = true;
        });

【讨论】：