如何使用 FabricJS 設定三角形從頂部的位置？
- WBOY轉載
- 2023-09-17 16:25:02864瀏覽
在本教學中，我們將使用 FabricJS 設定三角形的位置。 top 屬性允許我們操作物件的位置。預設情況下，頂部位置是相對於物件的top.
Syntax
new Fabric.Triangle({ top: Number }: Object)< /pre><h2>參數</h2><ul class="list"><li><p><ul class="list"><li><p><strong>選項</strong><strong> (可選)</strongphpcngtphp cn - 此參數是<em>Object</em> ，它為我們的三角形提供了額外的自訂。使用此參數，可以變更與 <em>top</em> 為屬性的物件相關的顏色、遊標、描邊寬度等屬性。 </p></li></ul><h2>Options Keys</h2phpcngt phpcn<ul 類別= list"><li><p><strong>top<<li><p><strong>top< - 此屬性接受<strong>Number</strong>，它允許我們設定三角形與畫布頂部的距離。</p></li> </ul><h2>範例1</h2> <p><strong>三角形物件的預設外觀</strong></p><p>我們看一段程式碼範例來了解當不使用top 屬性時我們的三角形物件如何出現。</ p><pre class="demo-code notranslate language-javascript" data-lang="javascript"><!DOCTYPE html>
<html>
<head>
<!--新增Fabric JS函式庫-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2> 三角形物件的預設外觀</h2>
<p> 不使用<b>top</b>屬性時可以看到三角形的預設外觀。 </p>
<canvas id="canvas"></canvas>
<script>
// 啟動畫布實例
var canvas = new Fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
畫布.setHeight(250);
// 初始化一個三角形對象
var triangle = new Fabric.Triangle({
左：105，
寬度：90，
身高：80，
填寫：“#ffc1cc”，
筆劃：“#fbaed2”，
筆畫寬度：5，
});
// 將其加入到畫布中
canvas.add(三角形);
</script>
</body>
</html>範例2
使用自訂值將top 屬性作為鍵傳遞top 屬性作為鍵傳遞 在此範例中，我們將top 屬性作為鍵傳遞，值為70。這意味著我們的三角形物件將放置在距頂部 70px 處。 <!DOCTYPE html>
<html>
<head>
<!--新增Fabric JS函式庫-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>將頂部屬性作為帶有自訂值的鍵傳遞</h2>
<p>可以看到三角形物件放置在距頂部70px的位置</p>
<canvas id="canvas"></canvas>
<script>
// 啟動畫布實例
var canvas = new Fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
畫布.setHeight(250);
// 初始化一個三角形對象
var triangle = new Fabric.Triangle({
左：105，
頂部：70，
寬度：90，
身高：80，
填寫：“#ffc1cc”，
筆劃：“#fbaed2”，
筆畫寬度：5，
});
// 將其加入到畫布中
canvas.add(三角形);
</script>
</body>
</html>
以上是如何使用 FabricJS 設定三角形從頂部的位置？的詳細內容。更多資訊請關注PHP中文網其他相關文章！