数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何使用 FabricJS 设置圆形的旋转角度？
在本教程中，我们将学习如何使用 FabricJS 设置圆形的旋转角度。圆形是 FabricJS 提供的各种形状之一。为了创建一个圆形，我们必须创建一个 fabric.Circle 类的实例并将其添加到画布上。FabricJS 中的 angle 属性定义了对象二维旋转的角度。我们还有 centeredRotation 属性，它允许我们使用圆形的中心点作为变换的原点。
语法
new fabric.Circle({ angle: Number, centeredRotation: Boolean }: Object)参数
options (可选) − 此参数是一个 Object，它为我们的对象提供了额外的自定义功能。使用此参数，可以更改与圆形相关的颜色、光标、笔触宽度以及许多其他属性，其中 angle 和 centeredRotation 也是属性。
选项键
angle − 此属性接受一个Number，它指定圆形旋转的角度（以度为单位）。
centeredRotation − 此属性接受一个Boolean 值，它确定圆形的中心是否为变换的原点。
示例 1
将角度作为键传递并使用自定义值，同时禁用圆形的居中旋转
以下示例演示了如何在 FabricJS 中设置圆形的旋转角度。负角度表示逆时针方向，正角度表示顺时针方向。由于我们将 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>Set the angle of rotation of a Circle using FabricJS</h2>
<p>Select the object and observe its controlling corners. You will notice that the angle of rotation is set at 60 degrees in the anti-clockwise direction, as we have set the <b>angle</b> at <b>-60</b>. </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,
radius: 50,
fill: "green",
stroke: "blue",
strokeWidth: 2,
angle: -60,
centeredRotation: false,
});
// Adding it to the canvas
canvas.add(cir);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>示例 2
启用圆形的居中旋转
从这个例子中我们可以看到，通过将 centeredRotation 属性设置为 True，我们的圆形现在使用其中心作为旋转中心。在 1.3.4 版本之前，centeredScaling 和 centeredRotation 被包含在一个名为 centerTransform 的单个属性中。
<!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>Set the angle of rotation of a Circle using FabricJS</h2>
<p>Select the object and observe its controlling corners. Here we have set the angle of rotation at 60 degrees in the anti-clockwise direction, and when you rotate the circle, it will rotate around its center, as we have set <b>centeredRotation</b> 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,
radius: 50,
fill: "green",
stroke: "blue",
strokeWidth: 2,
angle: -60,
centeredRotation: true,
});
// Adding it to the canvas
canvas.add(cir);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
更新于: 2022年5月25日
293 次浏览
广告