이 기사에서는 FabricJS에서 캔버스 상호 작용을 비활성화하는 방법을 알아봅니다. 각 객체 상단의 상호 작용 레이어는 FabricJS의 고유한 기능 중 하나입니다. 캔버스를 초기화하면 개체를 선택하거나 끌거나 그룹 선택을 조작할 수 있습니다. 그러나 상호 작용 속성을 False로 지정하면 이 모든 작업을 취소할 수 있습니다.
new fabric.Canvas(element: HTMLElement|String, { interactive : Boolean }: Object)Element - 이 매개변수는
Options(선택 사항) - 이 매개변수는 캔버스에 대한 추가 사용자 정의를 제공하는 개체입니다. 이 매개변수를 사용하면 색상, 커서, 테두리 너비 및 기타 여러 속성과 같은 캔버스와 관련된 속성을 변경할 수 있으며, 그중 Interactive는 대화형 캔버스를 원하는지 여부를 결정할 수 있는 속성입니다. 이 속성의 기본값은 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>Disabling the interactivity of canvas</h2>
<p>Here you can drag the object and manipulate them freely as we have set the <b>interactive</b> property to True. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas", {
interactive: true,
});
// Creating an instance of the fabric.Rect class
var obj1 = new fabric.Rect({
left: 170,
top: 90,
width: 60,
height: 80,
fill: "#966fd6",
angle: 90,
});
var obj2 = new fabric.Rect({
left: 200,
top: 120,
width: 60,
height: 80,
fill: "#ffa343",
angle: 56,
});
// Adding it to the canvas
canvas.add(obj1);
canvas.add(obj2);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>상호작용 키를 클래스에 전달
캔버스에 대한 상호작용을 비활성화하는 방법을 이해하기 위해 코드 예제를 살펴보겠습니다. 상호 작용 속성에 False 값을 할당하면 캔버스 개체 위에 있는 상호 작용 레이어가 제거됩니다.
rreee위 내용은 FabricJS를 사용하여 캔버스의 상호 작용을 비활성화하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
