调整fabric.js大小以保持边框大小 [英] Resize a fabricjs rect to maintain border size

问题描述

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

I would like to resize a fabricjs rect instead of scale it, but I'm seeing weird behaviour while dragging the resize handles. The border starts to disappear or duplicate. I've tried both the stable version 1.7.19 and the beta 2.0.0 of fabricjs.

这是我使用的代码的本质:

Here is the essence of the code I'm using:

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/

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

Try scaling it up and down a bit by dragging the resize handles.

放大和缩小问题的屏幕截图

我希望发生的是矩形在拖动控制柄时不断增大和缩小，并且边框大小保持不变.但是，如果您跨过270px左右，渲染就会以某种方式变得疯狂起来.释放鼠标按钮后，它将再次正确呈现.

What I would expect to happen is the rectangle growing and shrinking while dragging the handles, and the border size to stay the same. But somehow rendering starts to go bonkers if you cross 270px or so. When the mouse button is released, it renders properly again.

我做错了什么?谁知道解决方法?还是这可能是我可以报告的库中的错误?

What am I doing wrong? Who knows a fix? Or could this be a bug in the library I can report?

推荐答案

，如此处所述:

http://fabricjs.com/fabric-object-caching (实际上是最后一行)

http://fabricjs.com/fabric-object-caching ( really last line )

禁用noScaleCache就足够了. 无论如何，这都会给您提供缓存，只是在您每次扩展对象时都会使缓存无效.

disabling noScaleCache is enough. That gives you caching anyway, just it invalidates cache everytime you scale the object.

并不是说缓存rect是有用的，但是如果您对复杂路径具有相同的行为，那仍然是一件好事.

Not that caching a rect is that usefull, but if you have the same behaviour for complex paths, that is still a good thing to have.

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

这篇关于调整fabric.js大小以保持边框大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！