이 기사에서는 FabricJS를 사용하여 개체가 선택 영역에 완전히 포함된 경우에만 개체를 선택할 수 있도록 하는 방법을 알아봅니다. 이를 달성하기 위해 SelectionFullyContained 속성을 사용할 수 있습니다.
new fabric.Canvas(element: HTMLElement|String, { selectionFullyContained: Boolean }: Object)Element - 이 매개변수는
Options(선택 사항) - 이 매개변수는 캔버스에 대한 추가 사용자 정의를 제공하는 개체입니다. 이 매개변수를 사용하면 색상, 커서, 테두리 너비 및 캔버스와 관련된 기타 여러 속성을 변경할 수 있으며 그중 SelectionFullyContained가 속성입니다. 개체가 선택 영역에 완전히 포함된 경우에만 개체를 선택해야 하는지 여부를 결정하는 부울 값을 허용합니다. 기본값은 거짓입니다.
값이 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로 설정된 코드 예제를 살펴보겠습니다. 보시다시피 개체는 선택 영역에 완전히 포함된 경우에만 선택됩니다.
rreee위 내용은 FabricJS의 선택 영역에 개체가 완전히 포함된 경우에만 개체 선택을 활성화하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
