FabricJS를 사용하여 개체 위에 커서를 놓을 때까지 기다리는 직사각형을 만드는 방법은 무엇입니까?-JS 튜토리얼-php.cn

FabricJS를 사용하여 개체 위에 커서를 놓을 때까지 기다리는 직사각형을 만드는 방법은 무엇입니까?

PHPz

풀어 주다： 2023-08-23 16:29:02

앞으로

726명이 탐색했습니다.

如何使用 FabricJS 创建一个等待光标悬停在对象上的矩形？

이 튜토리얼에서는 FabricJS를 사용하여 커서가 그 위에 마우스를 놓을 때까지 기다리는 객체가 포함된 직사각형을 만듭니다. wait는 사용 가능한 기본 커서 스타일 중 하나이며 FabricJS 캔버스에서도 사용할 수 있습니다. FabricJS는 기본 커서를 재사용하는 기본, 전체 스크롤, 십자선, 열 크기 조정, 행 크기 조정 등과 같은 다양한 유형의 커서를 제공합니다. hoverCursor 속성은 커서가 캔버스 객체 위에 있을 때 스타일을 설정합니다.

Syntax

new fabric.Rect({ hoverCursor: String }: Object)

로그인 후 복사

Parameters

Options(선택 사항) - 이 매개 변수는 직사각형에 추가 사용자 정의를 제공하는 객체 입니다. 이 매개변수를 사용하면 hoverCursor 속성과 관련된 개체의 색상, 커서, 획 너비 및 기타 여러 속성을 변경할 수 있습니다.

Options Keys

hoverCursor - 이 속성은 캔버스 개체 위로 마우스를 가져가는 데 사용되는 커서의 이름을 결정하는 String을 허용합니다. 이 기능을 사용하면 캔버스의 직사각형 개체 위로 마우스를 가져갈 때 기본 커서 값을 설정할 수 있습니다.

예제 1

hoverCursor 클래스의 키 전달

기본적으로 캔버스의 직사각형 개체 위로 마우스를 가져가면 커서 유형은 이동입니다. FabricJS에서 직사각형 개체 위로 마우스를 가져갈 때 wait 커서가 있는 캔버스를 생성하는 코드 예제를 살펴보겠습니다.

<!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>Passing the hoverCursor key to the class</h2>
   <p>Hover over the rectangle to see the wait cursor</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a rectangle object
      var rect = new fabric.Rect({
         left: 125,
         top: 90,
         width: 170,
         height: 70,
         fill: "#faf0e6",
         padding: 9,
         stroke: "#9370db",
         strokeWidth: 5,
         hoverCursor: "wait",
      });

      // Add it to the canvas
      canvas.add(rect);
   </script>
</body>
</html>

로그인 후 복사

예제 2

인스턴스에만 영향을 미친다는 것을 보여줍니다.

이 예에서는 hoverCursor 키를 직사각형 클래스에 전달합니다. 즉, 캔버스에 있는 모든 개체의 hoverCursor 속성은 변경되지 않습니다. . 변경 사항은 해당 단일 개체에 대해서만 발생합니다. 아래 코드 예제는 이를 보여줍니다 -

<!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>Demonstrating that it affects the instance only</h2>
   <p>Hover over the rectangle objects to see that wait cursor applies to the left rectangle only. We have not applied the <b>hoverCursor</b> property on the rectangle that is on the right.</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a rectangle object
      var rect1 = new fabric.Rect({
         left: 55,
         top: 90,
         width: 170,
         height: 70,
         fill: "#faf0e6",
         padding: 9,
         stroke: "#9370db",
         strokeWidth: 5,
         hoverCursor: "wait",
      });

      // Initiate another rectangle object
      var rect2 = new fabric.Rect({
         left: 325,
         top: 90,
         width: 170,
         height: 70,
         fill: "#9370db",
         padding: 9,
         stroke: "#e6e6fa",
         strokeWidth: 5,
      });

      // Add them to the canvas
      canvas.add(rect1);
      canvas.add(rect2);
   </script>
</body>
</html>

로그인 후 복사

위 내용은 FabricJS를 사용하여 개체 위에 커서를 놓을 때까지 기다리는 직사각형을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!