資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用FabricJS鎖定圓形的旋轉？
在本教程中，我們將學習如何使用FabricJS鎖定圓形的旋轉。正如我們可以在畫布上指定圓形物件的位 置、顏色、不透明度和尺寸一樣，我們也可以指定是否希望它旋轉。這可以透過使用`lockRotation`屬性來完成。
語法
new fabric.Circle({ lockRotation : Boolean }: Object)引數
options (可選) − 此引數是一個物件，它為我們的圓形提供了額外的自定義。使用此引數，可以更改與`lockRotation`屬性相關的物件的許多屬性，例如顏色、游標、筆劃寬度等。
選項鍵
lockRotation − 此屬性接受一個布林值。如果我們將其賦值為“true”，則物件的旋轉將被鎖定。
示例 1
畫布中圓形物件的預設行為
讓我們來看一個例子，瞭解當不使用`lockRotation`屬性時圓形物件的預設行為。預設情況下，我們可以順時針或逆時針旋轉圓形物件。
<!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>Locking the rotation of circle using FabricJS</h2>
<p>Select the object and try to rotate it by holding its controlling corner at the top. You can rotate it freely in both clockwise or anticlockwise direction. This is the default behavior. Here we have not used the <b>lockRotation</b> property, but by default, it is set to False. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var circle = new fabric.Circle({
left: 115,
top: 50,
fill: "white",
radius: 50,
stroke: "black",
strokeWidth: 5
});
// Adding it to the canvas
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>示例 2
將lockRotation作為鍵並賦值為'true'
在這個例子中，我們將看到如何使用`lockRotation`屬性來阻止圓形物件旋轉。一旦我們嘗試旋轉圓形物件，就會顯示一個**不允許**的游標。這意味著旋轉操作不再允許。
<!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>Locking the rotation of a circle using FabricJS</h2>
<p>Select the object and try to rotate it. Now you won't be able to rotate the circle, as we have set <b>lockRotation</b> to True. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var circle = new fabric.Circle({
left: 115,
top: 50,
fill: "white",
radius: 50,
stroke: "black",
strokeWidth: 5,
lockRotation: true
});
// Adding it to the canvas
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
更新於：2022年5月25日
255 次瀏覽
廣告