数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何使用 FabricJS 禁用圆形的居中缩放？
在本教程中，我们将学习如何使用 FabricJS 禁用圆形的居中缩放。圆形是 FabricJS 提供的各种形状之一。为了创建圆形，我们必须创建一个 `fabric.Circle` 类的实例并将其添加到画布中。当通过控件进行缩放时，为 `centeredScaling` 属性赋值 `true`，会使用中心作为对象的变换原点。
语法
new fabric.Circle({ centeredScaling: Boolean }: Object)参数
options (可选) − 此参数是一个对象，它为我们的圆形提供了额外的自定义功能。使用此参数，可以更改与对象相关的许多属性，例如颜色、光标、笔触宽度等等，其中 `centeredScaling` 就是一个属性。
选项键
centeredScaling − 此属性接受一个 **布尔值**。当此属性为 **True** 时，对象使用其中心作为变换原点。
示例 1
将 `centeredScaling` 作为键并为其赋值 "true"
让我们来看一段代码，了解当启用 `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 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 属性
我们可以通过为 `centeredScaling` 属性赋值 `false` 来禁用它。这将强制圆形不再使用圆心作为变换中心。以下是一段演示代码。
<!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>
更新于：2022年5月25日
浏览量：183
广告