具有笔划的矩形,缩放时笔划线被误转换

Question

感谢,我在这个网站和贡献者那里得到了很多帮助.现在我有一个关于带有笔画的Fabric.js中矩形的问题,因为我用它作为图像和文本的占位符,当我缩放它时,边框线宽也是缩放的,我认为这是一个问题,因为我想要保持边框宽度不变.

var canvas = new fabric.Canvas("c1");

var el = new fabric.Rect({
    originX: "left",
    originY: "top",
    left: 5,
    top: 5,
    stroke: "#ccc",
    strokWidth: 1,
    fill: 'transparent',
    opacity: 1,
    width: 200,
    height: 200,
    cornerSize: 6
});

canvas.add (el);
canvas.renderAll ();

请参见此处的示例http://jsfiddle.net/9yb46/,尝试水平缩放.并且图像也在这里,并且看到左边框和右边框宽度,应该与顶部和底部边框相同,但不是:

Answer 1

这可以这样做,以便您可以独立扩展.

在缩放事件中,检查宽度,高度和比例因子,将高度和宽度设置为新的有效值,并重置scaleX和scaleY.

这很可能会破坏与对象一起缩放的其他东西,因此您必须以类似的方式处理这些属性.

演示小提琴.

var canvas = new fabric.Canvas("c1");

var el = new fabric.Rect({
    originX: "left",
    originY: "top",
    left: 5,
    top: 5,
    stroke: "rgb(0,0,0)",
    strokeWidth: 1,
    fill: 'transparent',
    opacity: 1,
    width: 200,
    height: 200,
    cornerSize: 6
});

el.on({
    'scaling': function(e) {
        var obj = this,
            w = obj.width * obj.scaleX,
            h = obj.height * obj.scaleY,
            s = obj.strokeWidth;

        obj.set({
            'height'     : h,
            'width'      : w,
            'scaleX'     : 1,
            'scaleY'     : 1
        });
    }
});

canvas.add (el);
canvas.renderAll ();

Answer 2

首先,你错过了小提琴中属性的名称:strokWidth - 缺少e.但这不是问题的原因,因为strokeWidth的默认值是1.

缩放的笔划问题是预期的行为,您要求做的不是.无论如何,你检查我的代码之前,阅读在这里和这里也许有些更在这里.

然后尝试使用此代码来帮助满足您的需求,只有将矩形的比例保持为1:1(scaleX = scaleY),这才能正常工作.

这是jsfiddle:

var canvas = new fabric.Canvas("c1");

var el = new fabric.Rect({
    originX: "left",
    originY: "top",
    left: 5,
    top: 5,
    stroke: "rgb(0,0,0)",
    strokeWidth: 1,
    fill: 'transparent',
    opacity: 1,
    width: 200,
    height: 200,
    cornerSize: 6
});

el.myCustomOptionKeepStrokeWidth = 1;
canvas.on({
    'object:scaling': function(e) {
        var obj = e.target;
        if(obj.myCustomOptionKeepStrokeWidth){
            var newStrokeWidth = obj.myCustomOptionKeepStrokeWidth / ((obj.scaleX + obj.scaleY) / 2);
            obj.set('strokeWidth',newStrokeWidth);
        }
    }
});

canvas.add (el);
canvas.renderAll ();