newFabric.Triangl"/> newFabric.Triangl">
在本教學中,我們將使用 FabricJS 設定三角形的位置。 top 屬性允許我們操作物件的位置。預設情況下,頂部位置是相對於物件的top.
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>
使用自訂值將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中文網其他相關文章!