資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究使用 FabricJS 將多邊形物件轉換為 HTMLCanvasElement
我們可以透過建立 fabric.Polygon 的例項來建立一個多邊形物件。多邊形物件可以由任何由一組連線的直線段組成的封閉形狀來表徵。由於它是 FabricJS 的基本元素之一，我們還可以透過應用角度、不透明度等屬性輕鬆自定義它。
為了將多邊形物件轉換為 HTMLCanvasElement，我們使用 toCanvasElement 方法。它返回 HTMLCanvasElement 型別的 DOM 元素，這是一個介面，它繼承了 HTMLElement 介面的屬性和方法。
語法
toCanvasElement( options: Object ): HTMLCanvasElement
引數
options（可選） - 此引數接受一個 Object，它為我們的 HTMLCanvasElement 提供額外的自定義。使用此引數，可以更改與 HTMLCanvasElement 相關的寬度、高度和許多其他屬性。
示例 1：不使用 toCanvasElement 方法時的預設值
讓我們看一個程式碼示例，瞭解當不使用 toCanvasElement 方法時多邊形物件的外觀。使用 toCanvasElement 方法時，將返回 HTMLCanvasElement 型別的 DOM 元素。HTMLCanvasElement 介面提供了各種用於更改畫布顯示的方法和屬性。它繼承了 HTMLElement 介面的屬性和方法。這裡，我們已將多邊形物件記錄到控制檯，因此我們只能在控制檯中看到多邊形物件的預設值。
<!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 value without using toCanvasElement method</h2>
<p>You can open console from dev tools to see that the logged output contains the default value of the polygon object </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 polygon object
var polygon = new fabric.Polygon(
[
{ x: 600, y: 310 },
{ x: 650, y: 450 },
{ x: 600, y: 480 },
{ x: 550, y: 480 },
{ x: 450, y: 460 },
{ x: 300, y: 210 },
],
{
fill: "#778899",
stroke: "blue",
strokeWidth: 5,
top: 50,
left: 100,
scaleX: 0.5,
scaleY: 0.5,
}
);
// Adding it to the canvas
canvas.add(polygon);
// Console logging the polygon object
console.log("The polygon object is as follows:", polygon);
</script>
</body>
</html>
示例 2：使用 toCanvasElement 方法
讓我們看一個程式碼示例，瞭解使用 toCanvasElement 方法時記錄的輸出。您可以從開發者工具中開啟控制檯，檢視正在返回 HTMLCanvasElement 型別的 DOM 元素。
<!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>Using the toCanvasElement method</h2>
<p>You can open console from dev tools to see the logged output</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 polygon object
var polygon = new fabric.Polygon(
[
{ x: 600, y: 310 },
{ x: 650, y: 450 },
{ x: 600, y: 480 },
{ x: 550, y: 480 },
{ x: 450, y: 460 },
{ x: 300, y: 210 },
],
{
fill: "#778899",
stroke: "blue",
strokeWidth: 5,
top: 50,
left: 100,
scaleX: 0.5,
scaleY: 0.5,
}
);
// Adding it to the canvas
canvas.add(polygon);
// Using toCanvasElement method
console.log(
"The output on using toCanvasElement method is:",
polygon.toCanvasElement()
);
</script>
</body>
</html>
結論
在本教程中，我們使用兩個簡單的示例演示瞭如何使用 FabricJS 將多邊形物件轉換為 HTMLCanvasElement。
更新於： 2022-12-28
131 次瀏覽
廣告