FabricJS를 사용하여 캔버스에서 드래그하여 객체 선택을 비활성화하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

FabricJS를 사용하여 캔버스에서 드래그하여 객체 선택을 비활성화하는 방법은 무엇입니까?

PHPz

풀어 주다： 2023-09-13 23:09:08

앞으로

951명이 탐색했습니다.

如何使用 FabricJS 通过在画布中拖动来禁用对象选择？

이 글에서는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!