Fabricjs 如何缩放对象但保持边框(笔画)宽度固定

Question

我正在开发一个基于fabricjs 的图表工具。我们的工具有我们自己的形状集合，它是基于 svg 的。我的问题是当我缩放对象时，边框(描边)也会缩放。我的问题是:如何缩放对象但保持笔触宽度固定。请检查附件。




非常感谢!

Answer 1

这是一个简单的示例，在对象的比例上，我们保留对原始笔画的引用并根据比例计算新笔画。

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) => {
	var o = e.target;
	if (!o.strokeWidthUnscaled && o.strokeWidth) {
  	o.strokeWidthUnscaled = o.strokeWidth;
  }
	if (o.strokeWidthUnscaled) {
  	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>