資料結構
網路
關係型資料庫管理系統
作業系統
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 次瀏覽
廣告