所属分类:web前端开发
在本文中,我们将学习如何使用 FabricJS 仅当对象完全包含在选择区域中时才启用对象的选择。我们可以使用 SelectionFullyContained 属性来实现此目的。
new fabric.Canvas(element: HTMLElement|String, { selectionFullyContained: Boolean }: Object)
元素 - 此参数是
选项(可选) - 此参数是一个对象,它提供对我们的画布进行额外的定制。使用此参数,可以更改与画布相关的颜色、光标、边框宽度和许多其他属性,其中selectionFullyContained 是一个属性。它接受一个布尔值,该值确定是否仅当对象完全包含在选择区域中时才应选择该对象。默认值为 False。
传递值为 False 的 SelectionFullyContained 键
让我们看一下 FabricJS 中默认行为的代码示例,即尽管对象未完全包含在选择区域中,但对象仍被选中。在此示例中,我们将 SelectionFullyContained 的值传递为 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>Enabling selection of an object only when it is fully contained in a selection area</h2> <p>Select a partial area around the object. The entire object would be selected even if you select a partial area containing the object.</p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas", { selectionFullyContained: false }); // Creating an instance of the fabric.Rect class var circle = new fabric.Circle({ left: 215, top: 100, radius: 50, fill: "orange", }); // Adding it to the canvas canvas.add(circle); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); </script> </body> </html>
将selectionFullyContained键传递给值为True的类
让我们看一个代码示例,其中selectionFullyContained属性的值具有已设置为 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>Enabling selection of an object only when it is fully contained in a selection area</h2> <p>Here you cannot select the object by selecting a partial area around the object. The object must be fully contained inside the selection area.</p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas", { selectionFullyContained: true }); // Creating an instance of the fabric.Rect class var circle = new fabric.Circle({ left: 215, top: 100, radius: 50, fill: "orange" }); // Adding it to the canvas canvas.add(circle); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); </script> </body> </html>