在本文中,我們將看到如何使用FabricJS設置控製畫布Itext角點的虛線模式。 Fabric.js是一個JavaScript庫,用於處理畫布。 canvas Itext是用於創建Itext實例的fabric.js類之一。 canvas Itext表示Itext是可移動的,並且可以根據需要進行拉伸。在本文中,我們將使用cornerDashArray屬性在畫布Itext中設置破折號模式。
首先導入fabric.js庫。導入庫後,在body標簽中創建一個畫布塊,其中將包含Itext。之後,初始化由Fabric.JS提供的Canvas和Itext類的實例,並使用cornerDashArray屬性設置虛線圖案。
用法:
fabric.Itext (Itext , { cornerDashArray:array });
參數:此函數采用上述和以下描述的單個參數:
- cornerDashArray :此參數采用數組值。
例:此示例使用FabricJS設置畫布Itext的cornerDashArray屬性,如下例所示:
HTML
<!DOCTYPE html>
<html>
<head>
<!-- FabricJS CDN -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js">
</script>
</head>
<body>
<div style="text-align:center; width:400px">
<h1 style="color:green">GeeksforGeeks</h1>
<b> Fabric.js | Itext cornerDashArray Property </b>
</div>
<div style="text-align:center">
<canvas
id="canvas"
width="400"
height="200"
style="border:1px solid green"
>
</canvas>
</div>
<script>
var canvas = new fabric.Canvas("canvas");
var geek = new fabric.IText("GeeksforGeeks", {
cornerDashArray:[5],
});
console.log(geek.willDrawShadow());
canvas.add(geek);
canvas.centerObject(geek);
</script>
</body>
</html>
輸出:
相關用法
- Fabric.js Circle cornerDashArray屬性用法及代碼示例
- Fabric.js Ellipse cornerDashArray屬性用法及代碼示例
- Fabric.js Rect cornerDashArray屬性用法及代碼示例
- Fabric.js Image cornerDashArray屬性用法及代碼示例
- Fabric.js Polygon cornerDashArray屬性用法及代碼示例
- Fabric.js line cornerDashArray屬性用法及代碼示例
- Fabric.js Textbox cornerDashArray屬性用法及代碼示例
- Fabric.js Polyline cornerDashArray屬性用法及代碼示例
- Fabric.js Path cornerDashArray用法及代碼示例
- Fabric.js Group cornerDashArray屬性用法及代碼示例
- Fabric.js Triangle cornerDashArray屬性用法及代碼示例
- Fabric.js Itext lockMovementY屬性用法及代碼示例
- Fabric.js Itext lockRotation屬性用法及代碼示例
- Fabric.js Itext fontStyle屬性用法及代碼示例
- Fabric.js Itext hasBorders屬性用法及代碼示例
- Fabric.js Itext lockMovementX屬性用法及代碼示例
- Fabric.js Itext cornerStyle屬性用法及代碼示例
- Fabric.js Itext borderColor屬性用法及代碼示例
- Fabric.js Itext angle屬性用法及代碼示例
- Fabric.js Itext centeredRotation屬性用法及代碼示例
- Fabric.js Itext cornerSize屬性用法及代碼示例
- Fabric.js Itext hoverCursor屬性用法及代碼示例
- Fabric.js Itext underline屬性用法及代碼示例
- Fabric.js Itext transparentCorners屬性用法及代碼示例
注:本文由純淨天空篩選整理自dheerchanana08大神的英文原創作品 Fabric.js Itext cornerDashArray Property。非經特殊聲明,原始代碼版權歸原作者所有,本譯文未經允許或授權,請勿轉載或複製。