如何使用FabricJS設定三角形在x軸上的傾斜角度？
- WBOY轉載
- 2023-09-05 22:37:12863瀏覽
在本教程中，我們將學習如何使用FabricJS在三角形的x軸上設定傾斜角度。三角形是FabricJS提供的各種形狀之一。為了建立一個三角形，我們將需要建立一個fabric.Triangle類別的實例並將其新增至畫布上。
我們可以透過改變其尺寸、添加背景顏色或改變x軸上的傾斜角度來自訂我們的三角形物件。我們可以使用skewX屬性來實現這一點。
語法
new fabric.Triangle({ skewX: Number }: Objectscript">new fabric.Triangle({ skewX: Number }: Object )參數
選項 (可選) − 此參數是一個物件，它提供了對我們的三角形進行額外自訂的選項。使用此參數，可以變更與skewX屬性相關的物件的顏色、遊標、描邊寬度和許多其他屬性。
選項鍵
skewX − 此屬性接受一個數字值，確定物件在x軸上的傾斜角度。
範例1
當未應用skewX屬性時
讓我們看一個程式碼範例，了解當未應用skewX屬性時我們的三角形物件的外觀。在這種情況下，我們的三角形物件不會有任何角度的傾斜。<!DOCTYPE html>
<html> 的中文翻譯為：<html>
<head>的中文翻譯為：<頭部>
<!-- 新增Fabric JS函式庫 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>的中文翻譯為：</head>
<body>的中文翻譯為：<body>
<h2>當未應用skewX屬性時</h2>
<p>預設情況下，您可以看到三角形沒有任何角度的傾斜</p>
<canvas id="canvas"></canvas>
<script> 的中文翻譯為： <script>
// 初始化一個畫布實例
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// 初始化一個三角形對象
var triangle = new fabric.Triangle({
left: 120,
top: 70,
width: 90,
高度：80,
fill: "#b7410e"，
stroke: "#f5deb3",
（註：這是一段HTML程式碼，其中 表示空格）
strokeWidth: 7,
});
// 將其加入到畫布中
canvas.add(triangle);
</script>
</body> 的中文翻譯為：</body>
</html>範例2
將skewX作為鍵並為其指派自訂值。
在這個範例中，我們將看到如何為skewX屬性分配一個數值。傳遞的值將決定沿著X軸的傾斜程度。
<!DOCTYPE html>
<html> 的中文翻譯為：<html>
<head>的中文翻譯為：<頭部>
<!-- 新增Fabric JS函式庫 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>的中文翻譯為：</head>
<body>的中文翻譯為：<body>
<h2>Passing skewX as key and assigning it a custom value</h2>
<p>You can see the triangle has skewed on x-axis at a 50 degree angle</p>
<canvas id="canvas"></canvas>
<script> 的中文翻譯為： <script>
// 初始化一個畫布實例
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// 初始化一個三角形對象
var triangle = new fabric.Triangle({
left: 120,
top: 70,
width: 90,
高度：80,
fill: "#b7410e"，
stroke: "#f5deb3",
（註：這是一段HTML程式碼，其中 表示空格）
strokeWidth: 7,
skewX: 50,
});
// 將其加入到畫布中
canvas.add(triangle);
</script>
</body> 的中文翻譯為：</body>
</html> 的中文翻譯為：以上是如何使用FabricJS設定三角形在x軸上的傾斜角度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除