資料結構
網路
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 次檢視
廣告