数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 FabricJS 禁用圆形的居中旋转？
在本教程中，我们将学习如何使用 FabricJS 禁用圆形的居中旋转。圆形是 FabricJS 提供的各种形状之一。为了创建一个圆形，我们将创建一个 fabric.Circle 类的实例并将其添加到画布上。默认情况下，FabricJS 中的所有对象都使用其中心作为旋转点。但是，我们可以使用 centeredRotation 属性更改此行为。
语法
new fabric.Circle({ centeredRotation: Boolean }: Object)参数
options（可选） - 此参数是一个 Object，它为我们的圆形提供额外的自定义。使用此参数，可以更改与对象相关的属性，例如颜色、光标、笔划宽度以及许多其他属性，其中 centeredRotation 是一个属性。
选项键
centeredRotation - 此属性接受一个 Boolean 值，允许我们控制对象在通过控件旋转时是否使用其变换原点作为中心点。其默认值为 True。
示例 1
FabricJS 中圆形旋转的默认行为
让我们看一个描述圆形对象的默认行为的示例。由于 centeredRotation 属性默认设置为 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>Disabling the centered rotation of circle using FabricJs</h2>
<p>Select the object and rotate it by holding its controlling corner at the top. The circle will rotate around its center. It is the default behavior. Here we have not used the <b>centeredRotation</b> property but it is by default 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",
});
// Adding it to the canvas
canvas.add(cir);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>示例 2
使用值为“false”的centeredRotation 键
既然我们已经看到了默认行为，让我们看一段代码来了解当 centeredRotation 属性被赋值为 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 rotation of circle using FabricJs</h2>
<p>Select the object and rotate it by holding its controlling corner at the top. Now the circle will not rotate around its cente because we have used the <b>centeredRotation</b> property and set it False. </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",
centeredRotation: false
});
// Adding it to the canvas
canvas.add(cir);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
更新于: 2022年5月25日
200 次查看
广告