Fabricjs如何缩放对象但保持边框（中风）宽度固定

我正在开发基于fabricjs的图表工具。我们的工具有我们自己的形状集合，这是基于svg的。我的问题是当我缩放对象，边界（中风）的比例。我的问题是：如何缩放对象，但保持笔触宽度固定。请检查附件。
Fabricjs如何缩放对象但保持边框（中风）宽度固定

非常感谢您！

来源

2016-09-17 trongd

下面是一个简单的例子，其中在对象的比例尺上我们保留对原始笔画的引用并基于该尺度计算新的笔画。

var canvas = new fabric.Canvas('c', { selection: false, preserveObjectStacking:true }); 
 
window.canvas = canvas; 
 
canvas.add(new fabric.Rect({ 
 
    left: 100, 
 
    top: 100, 
 
    width: 50, 
 
    height: 50, 
 
    fill: '#faa', 
 
    originX: 'left', 
 
    originY: 'top', 
 
    stroke: "#000", 
 
    strokeWidth: 1, 
 
    centeredRotation: true 
 
})); 
 

 
canvas.on('object:scaling', (e) => { 
 
\t var o = e.target; 
 
\t if (!o.strokeWidthUnscaled && o.strokeWidth) { 
 
    \t o.strokeWidthUnscaled = o.strokeWidth; 
 
    } 
 
\t if (o.strokeWidthUnscaled) { 
 
    \t o.strokeWidth = o.strokeWidthUnscaled/o.scaleX; 
 
    } 
 
})

canvas { 
 
    border: 1px solid #ccc; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.4/fabric.min.js"></script> 
 
<canvas id="c" width="600" height="600"></canvas>

来源

2016-09-18 12:38:47 StefanHayden

您是否尝试导入svg。我知道它适用于这些内置形状，但不能导入svg。 – trongd

我不知道任何任何svg好方法。让你的形状成为一条单一的道路。创建一个fabric.Path（），然后将笔画添加到该路径对象。 – StefanHayden

对不起，这是我的错误。你的解决方案应该可行 – trongd

我发现什么感觉就像一个更好的解决方案，确实很好用SVG路径。

您可以覆盖fabricjs'_renderStroke方法并在ctx.stroke();之前添加ctx.scale(1/this.scaleX, 1/this.scaleY);，如下所示。

fabric.Object.prototype._renderStroke = function(ctx) { 
    if (!this.stroke || this.strokeWidth === 0) { 
     return; 
    } 
    if (this.shadow && !this.shadow.affectStroke) { 
     this._removeShadow(ctx); 
    } 
    ctx.save(); 
    ctx.scale(1/this.scaleX, 1/this.scaleY); 
    this._setLineDash(ctx, this.strokeDashArray, this._renderDashedStroke); 
    this._applyPatternGradientTransform(ctx, this.stroke); 
    ctx.stroke(); 
    ctx.restore(); 
};

您可能还需要重写fabric.Object.prototype._getTransformedDimensions调整的边框，以占规模上的差异。

此外，更完整的实现可能会添加一个结构对象属性，以有条件地控制这两个重写方法的更改。

来源

2018-01-19 14:31:58 byoungb

Fabricjs如何缩放对象但保持边框（中风）宽度固定

回答

相关问题