資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究FabricJS – 如何設定線條控制角的大小？
在本教程中，我們將學習如何使用 FabricJS 設定線條控制角的大小。物件的控制角允許我們縮放、拉伸或更改其位置。我們可以透過多種方式自定義控制角，例如為其新增特定的顏色、更改其大小等。我們可以使用 cornerSize 屬性更改大小。
語法
new fabric.Line( points: Array, { cornerSize: Number }: Object) 引數
points − 此引數接受一個點陣列，該陣列確定 (x1, y1) 和 (x2, y2) 值，分別是線條開始和結束處的 x 軸和 y 軸座標。
options（可選）− 此引數是一個物件，它為我們的物件提供額外的自定義。使用此引數，可以更改與物件相關的原點、筆觸寬度和許多其他屬性，其中cornerSize 是一個屬性。
選項鍵
cornerSize − 此屬性接受一個數字，允許我們操作所選物件的控制角的大小。其預設值為 13。
控制角的預設大小
示例
讓我們來看一個程式碼示例，該示例描述了線條物件在處於活動選擇狀態時控制角的預設大小。
<!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>Default size of the controlling corners</h2> <p>You can select the line object to see the default size of controlling corners</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 Line object var line = new fabric.Line([200, 100, 100, 40], { stroke: "blue", strokeWidth: 20, }); // Add it to the canvas canvas.add(line); </script> </body> </html>
將cornerSize作為鍵傳遞並使用自定義值
示例
在此示例中，我們將cornerSize屬性作為鍵傳遞，其值為 17。我們可以看到當選擇線條物件時，這如何更改控制角的大小。
<!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 cornerSize as key with a custom value</h2> <p>You can select the line object to see the size of controlling corners</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 Line object var line = new fabric.Line([200, 100, 100, 40], { stroke: "blue", strokeWidth: 20, cornerColor: "#87a96b", cornerSize: 17, }); // Add it to the canvas canvas.add(line); </script> </body> </html>
更新於： 2022年10月20日
479 次瀏覽
廣告