在本教程中，我们将学习如何使用 FabricJS 禁用 Circle 的居中缩放。圆形是 FabricJS 提供的各种形状之一。为了创建一个圆圈，我们必须创建一个 Fabric.Circle 类的实例并将其添加到画布中。通过控件进行缩放时，为 centeredScaling 属性分配一个真值，使用中心作为对象的变换原点。
语法
new fabric.Circle({ centeredScaling: Boolean }: Object)
参数
选项（可选） - 此参数是一个提供额外自定义的对象到我们的圈子。使用此参数，可以更改与centeredScaling属性相关的对象的颜色、光标、描边宽度等属性
选项键
centeredScaling - 此属性接受布尔值强>价值。当此属性为True时，对象使用中心作为变换原点。
示例 1
将centeredScaling作为键传递并为其分配一个“true”值
让我们看一段代码，看看圆形对象在centeredScaling时的行为
em> 属性已启用。当我们放大对象时，变换的原点是圆心。
<!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>Disabling the centered scaling of circle using FabricJs</h2>
<p>Select the object and stretch it by holding one of its controlling corners. You will notice the circle scales up uniformly from its center. This is the default behavior. Here we have not used the <b>centeredScaling</b> property but by default, it is set to True. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var cir = new fabric.Circle({
left: 215,
top: 100,
fill: "white",
radius: 50,
stroke: "#c154c1",
strokeWidth: 5,
borderColor: "#daa520",
centeredScaling: true
});
// Adding it to the canvas
canvas.add(cir);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
示例 2
禁用 centeredScaling 属性
我们可以通过为其指定一个 false 值来禁用 centeredScaling 属性。它将迫使圆不再使用圆心作为变换中心。这是一个代码来证明这一点
<!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>Disabling the centered scaling of circle using FabricJs</h2>
<p>Select the object and stretch it by holding one of its controlling corners. You will notice that the circle is no longer scaling up uniformly from its center. Here we have used the <b>centeredScaling</b> property and set it False. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var circle = new fabric.Circle({
left: 215,
top: 100,
fill: "",
radius: 50,
stroke: "#c154c1",
strokeWidth: 5,
borderColor: "#daa520",
centeredScaling: false
});
// Adding it to the canvas
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
以上就是如何使用 FabricJS 禁用 Circle 的居中缩放？的详细内容，更多请关注编程之家其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。