在本教學中，我們將學習如何尋找 Image 實例的複雜度 使用 FabricJS。我們可以透過建立fabric.Image的實例來建立一個Image物件。 由於它是FabricJS的基本元素之一，我們也可以輕鬆地自訂它 應用角度、不透明度等屬性。為了找到影像的複雜度 例如，我們使用複雜性方法。如果當前物件是此方法將傳回 1 直接從基底類別繼承，而不是從子類別繼承。
complexity(): Number
讓我們看一個程式碼範例，看看使用complexity方法時記錄的輸出 取得 Image 實例的複雜度。除非進行子分類，否則複雜度為1。
<!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 complexity method</h2>
<p>You can open console from dev tools and see the logged output</p>
<canvas id="canvas"></canvas>
<img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" />
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiating the image element
var imageElement = document.getElementById("img1");
// Initiate an Image object
var image = new fabric.Image(imageElement, {
top: 50,
left: 110,
});
// Add it to the canvas
canvas.add(image);
// Using the complexity method
console.log("The complexity of Image instance is: ", image.complexity());
</script>
</body>
</html>
在此範例中，我們使用了複雜度方法來比較 圖像實例和多邊形實例。您可以從開發工具開啟控制台 看到複雜性是不同的。
<!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 complexity method to compare different objects</h2>
<p>You can open console from dev tools and see the logged output</p>
<canvas id="canvas"></canvas>
<img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" />
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiating the image element
var imageElement = document.getElementById("img1");
// Initiate an Image object
var image = new fabric.Image(imageElement, {
top: 50,
left: 50,
});
// Initiate a Polygon object
var polygon = new fabric.Polyline(
[
{ x: 50, y: 30 },
{ x: 105, y: 10 },
{ x: 160, y: 30 },
{ x: 100, y: 150 },
],
{
fill: "red",
left: 450,
top: 70,
}
);
// Add them both to the canvas
canvas.add(image);
canvas.add(polygon);
// Using the complexity method
console.log("The complexity of Image instance is: ", image.complexity());
console.log(
"The complexity of Polygon instance is: ",
polygon.complexity()
);
</script>
</body>
</html>
以上是如何使用 FabricJS 來尋找 Image 實例的複雜度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
