資料結構
網路
關係型資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學如何使用 FabricJS 停用三角形的居中縮放？
在本教程中，我們將學習如何使用 FabricJS 停用三角形的居中縮放。三角形是 FabricJS 提供的各種形狀之一。為了建立一個三角形，我們必須建立一個fabric.Triangle類的例項並將其新增到畫布。
當透過控制元件縮放物件時，如果將`centeredScaling`屬性的值設定為`true`，則變換的原點為其中心。
語法
new fabric.Triangle({ centeredScaling: Boolean }: Object)引數
選項（可選） - 此引數是一個物件，它為我們的三角形提供了額外的自定義。使用此引數，可以更改與物件相關的屬性，例如顏色、游標、筆劃寬度以及許多其他屬性，其中`centeredScaling`是一個屬性。
選項鍵
centeredScaling - 此屬性接受一個布林值，並允許我們控制物件是否應該使用其中心作為其變換原點。
示例 1
將`centeredScaling`作為鍵併為其賦值“true”
讓我們來看一個程式碼示例，看看當啟用`centeredScaling`屬性時三角形物件的行為。當我們向上縮放物件時，變換的原點是三角形的中心。
<!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>Passing centeredScaling as key and assigning it a "true" value</h2>
<p>Try scaling the triangle to see that it is using its center as the center of transformation.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a triangle object
var triangle = new fabric.Triangle({
left: 105,
top: 60,
width: 100,
height: 70,
fill: "#5f9ea0",
centeredScaling: true,
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>示例 2
停用`centeredScaling`屬性
我們可以透過將其值設定為`false`來停用`centeredScaling`屬性。這將不再使用三角形的中心作為變換中心。這是一個演示該功能的程式碼示例。
<!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>Disabling the centeredScaling property</h2>
<p>Try scaling the triangle to see that it is using one of its corners as the center of transformation.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a triangle object
var triangle = new fabric.Triangle({
left: 105,
top: 60,
width: 100,
height: 70,
fill: "#5f9ea0",
centeredScaling: false,
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>
更新於：2022年6月24日
86 次瀏覽
廣告