Question

我想调整fabricjs rect的大小而不是缩放它，但我在拖动调整大小手柄时看到了奇怪的行为。边界开始消失或重复。我已经尝试过稳定版1.7.19和beta 2.0.0的fabricjs。

以下是我正在使用的代码的本质：

canvas.on('object:scaling', function(){
    var obj = canvas.getActiveObject(),
        width = obj.width,
        height = obj.height,
        scaleX = obj.scaleX,
        scaleY = obj.scaleY;

    obj.set({
        width : width * scaleX,
        height : height * scaleY,
        scaleX: 1,
        scaleY: 1
    });
});

这里的工作示例：https://codepen.io/bramchi/pen/GMLYEV/

通过拖动调整大小手柄，尝试将其向上和向下缩放。

Screenshot of scaling up and down issues

我期望发生的是拖动手柄时矩形的增长和缩小，以及边框大小保持不变。但是如果你跨越270px左右，某种程度上渲染开始变得疯狂。释放鼠标按钮后，它会再次正确渲染。

我做错了什么？谁知道修复？或者这可能是我可以报告的库中的错误吗？

Answer 1

禁用对象缓存以避免此呈现行为：

fabric.Object.prototype.objectCaching = false;

出于性能原因Fabric.js caches objects，默认情况下drag rotate skew和scale操作。 fabric.js repo的主持人之一指出了我正确的方向，对他来说很好！

Answer 2

如下所述：

http://fabricjs.com/fabric-object-caching（真的是最后一行）

禁用noScaleCache就足够了。无论如何，这会让你进行缓存，只要它在每次缩放对象时都会使缓存失效。

并非缓存rect是有用的，但如果你对复杂路径有相同的行为，那么这仍然是一件好事。

  new fabric.Rect({
    left: 50,
    top: 50,
    width: 250,
    height: 250,
    stroke: 'gray',
    fill: 'lightgray',
    strokeWidth: 10,
    noScaleCache: false,
  })

调整fabricjs rect的大小以保持边框大小

2 个答案: