資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何使用 Fabric.js 更改畫布圓形的選中背景顏色？
Fabric.js 的 Circle 類用於透過 fabric.Circle 物件提供圓形形狀。Circle 物件用於提供圓形形狀，並且圓形是可以移動的，並且可以根據需要進行拉伸。對於筆觸、顏色、寬度、高度和填充顏色，Circle 是可自定義的。與畫布類相比，Circle 類提供了豐富的功能。
Circle 類包含不同的屬性，但是可以透過使用 selectionBackgroundColor 屬性來更改畫布圓形的選中背景顏色。Fabric.js 類的 selectionBackgroundColor 屬性指定更改圓形的選中背景顏色。
語法
以下是圓形物件的語法：
fabric.Circle({
radius: number,
: string
});
引數
radius - 用於指定圓形的半徑
selectionBackgroundColor - 指定選中背景的顏色。
步驟
請按照以下步驟使用 Fabric.js 更改畫布圓形的選中背景顏色：
步驟 1 - 在您的 HTML 檔案中包含 Fabric.js 庫。
步驟 2 - 在您的 HTML 檔案中建立一個新的畫布元素。
步驟 3 - 在您的 JavaScript 程式碼中初始化畫布元素。
步驟 4 - 建立一個新的 Fabric.js Circle 類物件，並將 selectionBackgroundColor 屬性設定為所需的圓形值。
步驟 5 - 將圓形物件新增到畫布。
示例
讓我們看看如何使用 fabric.js 更改畫布圓形的選中背景顏色。
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
</head>
<body>
<h2>Changing the Selection background color of a canvas circle</h2>
<p>Please select the circle canvas to see the selection background color</p>
<p>The selectionBackgroundColor is set to violet</p>
<canvas id="selectioncanvas"></canvas>
<script>
var canvas = new fabric.Canvas('selectioncanvas');
var circle2 = new fabric.Circle({
top: 50,
left: 50,
radius: 80,
selectionBackgroundColor: 'violet'
});
canvas.add(circle2);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(650);
</script>
</body>
</html>
此程式碼將建立一個具有指定 ID 的新畫布圓形元素，建立一個新的 Fabric.js Circle 類物件，並使用 selectionBackgroundColor 屬性更改選中背景顏色，並將圓形物件新增到畫布。圓形將以背景顏色顯示在畫布上。
示例
讓我們再看一個示例，其中我們可以使用 selectionBackgroundColor 屬性更改背景顏色選擇，以及諸如 left、top、fill、radius 之類的尺寸。
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
</head>
<body>
<h2>Changing the Selection background color of a canvas circle using Fabric.js</h2>
<p>Please select the circle canvas to see the selection background color</p>
<p>The selectionBackgroundColor is set to yellow</p>
<canvas id="colorcanvas"></canvas>
<script>
// Initiating a canvas instance
var canvas = new fabric.Canvas('colorcanvas');
// Create a instance of fabric.Circle Class
var circle4 = new fabric.Circle({
radius: 60,
fill: 'blue',
left: 50,
top: 50,
selectionBackgroundColor: 'yellow'
});
// Adding the Canvas
canvas.add(circle4);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(450);
</script>
</body>
</html>
此程式碼將建立一個具有指定 ID 和尺寸的新畫布圓形元素，建立一個新的 Fabric.js Circle 類物件，並使用 selectionBackgroundColor 方法更改選中的背景顏色，並將類物件新增到畫布。圓形將以我們在示例中定義的尺寸顯示在畫布上。
結論
在本文中，我們演示瞭如何更改畫布圓形的選中背景顏色以及示例。我們在這裡看到了兩個不同的示例。在第一個示例中，我們使用“selectionBackgroundColor”屬性更改選中的背景顏色。對於第二個示例，我們使用了 selectionBackgroundColor 方法和各種尺寸引數（如 left、top、fill 等）來更改選中的背景顏色。
357 次瀏覽
