在本教程中，我们将学习如何在使用 FabricJS 缩放时保持椭圆的笔画宽度。默认情况下，描边宽度根据对象的比例值增大或减小。但是，我们可以通过使用 StrokeUniform 属性来禁用此行为。
语法
new fabric.Ellipse({ strokeUniform: Boolean }: Object)
参数
选项（可选）- 此参数是一个提供额外自定义的对象到我们的椭圆。使用此参数，可以更改与 styleUniform 为属性的对象相关的颜色、光标、描边宽度和许多其他属性。
Options Keys
中风统一 - 该属性接受一个布尔值，允许我们指定是否描边宽度是否会随对象一起缩放。其默认值为 False。
示例 1
缩放对象时描边宽度的默认外观
以下示例描述了正在缩放的椭圆对象的描边宽度的默认外观。由于我们没有使用 tripUniform 属性，因此笔画宽度也会受到对象缩放的影响。
<!DOCTYPE html>
<html>
<head>
<!-- Adding the Fabric JS Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>How to maintain stroke width of Ellipse while scaling using FabricJS?</h2>
<p>Select the object and stretch it horizontally or vertically. Here the stroke width will get affected while scaling the object up or down. This is the default behavior. Here we have not used the <b>strokeUniform</b> property. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
// Initiate an ellipse instance
var ellipse = new fabric.Ellipse({
left: 215,
top: 100,
fill: "blue",
rx: 90,
ry: 50,
stroke: "#c154c1",
strokeWidth: 15,
});
canvas.add(ellipse);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
示例 2
将StrokeUniform 属性作为键传递
在此示例中，我们将传递StrokeUniform 属性作为键。因此，对象的笔划将不再随着对象的缩放而增加或减少。在此示例中，StrokeUniform 属性已被指定为“true”值，这将确保笔划始终与为笔划宽度输入的精确像素大小相匹配。
<!DOCTYPE html>
<html>
<head>
<!-- Adding the Fabric JS Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>Maintaining the stroke width of an Ellipse while scaling using FabricJS</h2>
<p>Select the object and stretch it in any direction. Here the stroke width of the ellipse will remain unaffected at the time of scaling up because we have applied the <b>strokeUniform</b> property. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
// Initiate an ellipse instance
var ellipse = new fabric.Ellipse({
left: 215,
top: 100,
fill: "blue",
rx: 90,
ry: 50,
stroke: "#c154c1",
strokeWidth: 15,
strokeUniform: true,
});
// Adding it to the canvas
canvas.add(ellipse);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
以上就是如何在使用 FabricJS 缩放时保持椭圆的笔划宽度？的详细内容，更多请关注编程之家其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。