Fabric.js如何缩放对象但保持边界(笔触)宽度固定 [英] Fabricjs How to scale object but keep the border (stroke) width fixed

问题描述

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

I'm developing a diagram tool based on fabricjs. Our tool has our own collection of shape, which is svg based. My problem is when I scale the object, the border (stroke) scale as well. My question is: How can I scale the object but keep the stroke width fixed. Please check the attachments.

非常感谢！

推荐答案

下面是一个简单的示例，其中在对象的比例尺上，我们保留对原始笔触的引用，并根据比例尺计算新的笔触.

Here is an easy example where on scale of an object we keep a reference to the original stroke and calculate a new stroke based on the scale.

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>

这篇关于Fabric.js如何缩放对象但保持边界(笔触)宽度固定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！