Question

我的目标in this jsfiddle是一个Fabric对象（例如，一个矩形），它将在视觉上与＃34;即使在缩放/扩展时也保持其原始边框宽度。例如，让我们说strokeWidth = 3px;通常当矩形扩展时，用户将看到边界更宽。在我的情况下，我需要边框以屏幕像素保持其宽度。

为了实现这一点，我每次缩放对象时计算一个因子factorHeight = origHeight / obj.getHeight()，并将strokeWidth乘以该因子。当对象按比例缩放时（在jsfiddle中尝试），这很有效。

但是，当对象不按比例缩放时，问题是顶部/底部边框宽度与右/左边框宽度不同。由于所有这些边框都有一个strokeWidth，因此无法改变此行为。有什么想法吗？

使用Javascript：

var canvas = new fabric.Canvas('c' );

var origWidth = 40;
var origHeight = 100;
var origStrokeWidth = 3;

var rect = new fabric.Rect({ 
    top: 30,
    left: 30,
    width: origWidth,
    height: origHeight,
    fill: 'rgba(255,255,255,0)',
    strokeWidth: origStrokeWidth,
    stroke: '#000000' 
});
canvas.add(rect);

canvas.on('object:scaling', onObjectScaled);

function onObjectScaled(e) {
    var obj = e.target;

    var factorHeight = origHeight / obj.getHeight();
    var factorWidth = origWidth / obj.getWidth();
    var factor;
    if (factorHeight < factorWidth)
        factor = factorHeight;
    else
        factor = factorWidth;
    var newStrokeWidth = origStrokeWidth * factor;

    obj.setStrokeWidth(newStrokeWidth);
    canvas.renderAll();
}

Answer 1

我遇到了同样的问题，这是我在SO上找到的解决方案，但我无法向您提供问题的链接，但这里是解决它的代码：

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

希望它也适合你。

即使扩展对象，如何保持边框宽度

1 个答案: