FabricJS를 사용하여 캔버스에서 드래그하여 객체 선택을 비활성화하는 방법은 무엇입니까?
- PHPz앞으로
- 2023-09-13 23:09:08905검색
이 글에서는 FabricJS에서 드래그하여 객체 선택을 비활성화하는 방법을 설명하겠습니다. FabricJS 캔버스에서는 기본적으로 아무 곳이나 클릭하고 영역을 선택할 수 있으며 해당 영역의 모든 개체가 선택됩니다. 이 글에서는 이 동작을 비활성화하는 방법을 살펴보겠습니다.
Syntax
new fabric.Canvas(element: HTMLElement|String, {selection: boolean}: Object)Parameters
Element - 이 매개변수는
옵션(선택 사항) - 이 매개 변수는 캔버스에 대한 추가 사용자 정의를 제공하는 개체입니다. 이 매개변수를 사용하면 색상, 커서, 테두리 너비 등의 속성과 캔버스와 관련된 기타 여러 속성을 변경할 수 있습니다. 선택 매개변수는 선택을 활성화해야 하는지 여부를 나타냅니다. 이 키의 기본값은 True입니다.
예제 1
먼저 드래그를 통한 선택이 활성화된 경우와 마찬가지로 어떻게 작동하는지 살펴보겠습니다. 이 예에서는 선택 키를 기본값이기도 한 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 selection of objects on a canvas</h2>
<p>Here you can select the object as the selection key is True</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas", {
selection: true
});
// Creating an instance of the fabric.Circle class
var cir = new fabric.Circle({
radius: 40,
fill: "#87a96b",
left: 30,
top: 20,
});
// Adding it to the canvas
canvas.add(cir);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>예제 2
선택 키 캔버스에서 개체를 드래그하여 선택할 수 있는지 여부를 지정합니다. 이 키를 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>Disabling the selection of objects on a canvas</h2>
<p> Here you cannot select an area around the object as the selection key is set to False.</p>
<canvas id="canvas"></canvas>
<script>
//Initiate a canvas instance
var canvas = new fabric.Canvas("canvas", {
selection: false
});
//creating an instance of the fabric.Circle class
var cir = new fabric.Circle({
radius: 40,
fill: "#87a96b",
left: 30,
top: 20,
});
//adding it to the canvas
canvas.add(cir);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>이제 선택 항목을 False로 설정했으므로 더 이상 객체 주변의 부분을 선택하여 드래그할 수 없습니다. 그러나 여전히 수동으로 개체를 클릭하고 선택할 수 있습니다.
위 내용은 FabricJS를 사용하여 캔버스에서 드래그하여 객체 선택을 비활성화하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
이 기사는 tutorialspoint.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제