資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究Fabric.js – 如何檢查影像物件是否完全包含在另一個物件的區域內？
在本教程中，我們將學習如何使用 FabricJS 檢查影像物件是否完全包含在另一個物件的區域內。我們可以透過建立fabric.Image的例項來建立影像物件。由於它是 FabricJS 的基本元素之一，我們還可以透過應用角度、不透明度等屬性輕鬆自定義它。為了檢查影像物件是否完全包含在另一個物件的區域內，我們使用isContainedWithinObject方法。
語法
isContainedWithinObject(other: Object, absolute: Boolean, calculate: Boolean ): Boolean
引數
other − 此引數接受一個物件，該物件指定我們要測試的物件。
absolute(可選) − 此引數接受一個字串值，該值指定是否使用不帶 viewportTransform 的座標。此引數是可選的。
calculate(可選) − 此引數接受一個布林值，該值指定是否使用當前位置的座標。此引數是可選的。
使用isContainedWithinObject方法
示例
讓我們看一個程式碼示例，以檢視使用isContainedWithinObject方法時記錄的輸出。isContainedWithinObject方法在檢查影像物件是否完全包含在另一個物件的區域內時返回 true 或 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>Using isContainedWithinObject method</h2> <p> You can open console from dev tools and see that the logged output contains a true value </p> <canvas id="canvas"></canvas> <img src="https://tutorialspoint.tw/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, }); // Initiate a rectangle object var rectangle = new fabric.Rect({ width: 390, height: 130, top: 40, left: 80, fill: "transparent", stroke: "red", strokeWidth: 6, }); // Add them to the canvas canvas.add(rectangle); canvas.add(image); // Using isContainedWithinObject method console.log( "Is the Image object contained within the area of the rectangle object ? : ", image.isContainedWithinObject(rectangle) ); </script> </body> </html>
使用isContainedWithinObject方法與多個物件
示例
在此示例中，我們分別使用了isContainedWithinObject方法以及兩個矩形物件 rect1 和 rect2。由於影像物件未包含在 rect2 的區域內，因此控制檯返回 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>Using isContainedWithinObject method with multiple objects</h2> <p> You can open console from dev tools and see that the logged output contains a false value </p> <canvas id="canvas"></canvas> <img src="https://tutorialspoint.tw/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, }); // Initiate a rectangle object var rect1 = new fabric.Rect({ width: 390, height: 130, top: 40, left: 80, fill: "transparent", stroke: "red", strokeWidth: 6, }); // Initiate another rectangle object var rect2 = new fabric.Rect({ width: 120, height: 40, top: 170, left: 320, fill: "blue", }); // Add them to the canvas canvas.add(rect1); canvas.add(rect2); canvas.add(image); // Using isContainedWithinObject method console.log( "Is the Image object contained within the area of the rectangle (rect2) object?: ", image.isContainedWithinObject(rect2) ); </script> </body> </html>
結論
在本教程中，我們使用兩個示例演示瞭如何在 FabricJS 中檢查影像物件是否完全包含在另一個物件的區域內。
更新於: 2022年10月26日
574 次瀏覽
廣告