資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 FabricJS 隱藏橢圓的控制邊框？
在本教程中，我們將學習如何使用 FabricJS 隱藏橢圓的控制邊框。橢圓是 FabricJS 提供的各種形狀之一。為了建立橢圓，我們將必須建立一個 fabric.Ellipse 類的例項並將其新增到畫布中。我們可以透過多種方式自定義我們的控制邊框，例如向其新增特定的顏色、虛線模式等。但是，我們也可以使用 hasBorders 屬性完全消除邊框。
語法
new fabric.Ellipse({ hasBorders: Boolean }: Object)引數
options （可選） - 此引數是一個 物件，它為我們的橢圓提供額外的自定義。使用此引數，可以更改與物件的許多屬性相關聯的顏色、游標、筆劃寬度等，其中 hasBorders 是一個屬性。
選項鍵
hasBorders - 此屬性接受一個 布林值，當設定為 False 時，將不會渲染控制邊框。預設值為 True。
示例 1
橢圓物件的控制邊框的預設外觀
以下示例顯示了橢圓的控制邊框的預設外觀。由於 hasBorders 屬性的預設值為“true”，因此在選擇橢圓物件時會渲染邊框。
<!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>How to hide the controlling borders of an Ellipse using FabricJS?</h2>
<p>Select the object and you would get to see the controlling borders. This is the default behavior.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
// Initiate an ellipse instance
var ellipse = new fabric.Ellipse({
left: 105,
top: 100,
fill: "white",
rx: 100,
ry: 60,
stroke: "#c154c1",
strokeWidth: 5,
});
// Adding it to the canvas
canvas.add(ellipse);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>示例 2
將 hasBorders 作為鍵併為其分配“false”值
如果將 hasBorders 屬性分配為“false”值，則邊框將不再渲染。這意味著當我們選擇橢圓物件時，控制邊框將被隱藏。
<!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>How to hide the controlling borders of an Ellipse using FabricJS?</h2>
<p>Select the object. Now you won't get to see the controlling borders because we have set the <b>hasBorders</b> property to False. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
// Initiate an ellipse instance
var ellipse = new fabric.Ellipse({
left: 105,
top: 100,
fill: "white",
rx: 100,
ry: 60,
stroke: "#c154c1",
strokeWidth: 5,
hasBorders: false,
});
// Adding it to the canvas
canvas.add(ellipse);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
更新於： 2022年5月24日
167 次檢視
廣告