数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何使用 FabricJS 设置椭圆的旋转角度？
在本教程中，我们将学习如何使用 FabricJS 设置椭圆的旋转角度。椭圆是 FabricJS 提供的各种形状之一。为了创建椭圆，我们必须创建一个 fabric.Ellipse 类的实例并将其添加到画布上。FabricJS 中的 angle 属性定义了对象 2D 旋转的角度。我们还有 centeredRotation 属性，它允许我们使用椭圆的中心点作为变换的原点。
语法
new fabric.Ellipse({ angle: Number, centeredRotation: Boolean }: Object)参数
options (可选) - 此参数是一个 Object，它为我们的椭圆提供了额外的自定义功能。使用此参数，可以更改与画布相关的许多属性，例如颜色、光标、笔触宽度等等，其中 angle 和 centeredRotation 也是属性。
选项键
angle - 此属性接受一个 Number，它指定椭圆的旋转角度（以度为单位）。
centeredRotation - 此属性接受一个布尔值，它决定是否将椭圆的中心作为变换的原点。
示例 1
将 angle 作为键并设置自定义值，同时禁用椭圆的中心旋转
让我们来看一个使用 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>How to set the angle of rotation of an Ellipse using FabricJS?</h2>
<p>Select the object and rotate it. Here we have set the angle of rotation at <b>-40</b></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: 180,
top: 180,
rx: 90,
ry: 50,
fill: "green",
stroke: "blue",
strokeWidth: 2,
angle: -40,
centeredRotation: false
})
// Adding it to the canvas
canvas.add(ellipse);
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>How to set the angle of rotation of an Ellipse using FabricJS?</h2>
<p>Select the object and rotate it. You will notice that the object rotates around its center as we have set the <b>centeredRotation</b> property to True. </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: 180,
top: 180,
rx: 90,
ry: 50,
fill: "green",
stroke: "blue",
strokeWidth: 2,
angle: -40,
centeredRotation: true
});
// Adding it to the canvas
canvas.add(ellipse);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
更新于: 2022年5月25日
230 次查看
广告