FabricJS를 사용하여 캔버스의 선택 영역 테두리 너비를 설정하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

FabricJS를 사용하여 캔버스의 선택 영역 테두리 너비를 설정하는 방법은 무엇입니까?

WBOY

풀어 주다： 2023-09-03 14:53:11

앞으로

1485명이 탐색했습니다.

如何使用 FabricJS 设置画布上选择区域边框的宽度？

이 기사에서는 FabricJS를 사용하여 캔버스에서 선택 영역 테두리의 너비를 설정하는 방법을 알아 보겠습니다. 선택 영역은 마우스를 사용하여 선택한 영역을 나타내며, 이 영역 아래의 모든 개체가 선택됩니다. FabricJS에서는 SelectionLineWidth 속성을 사용하여 선택 영역 테두리의 너비를 조정할 수 있습니다.

Syntax

new fabric.Canvas(element: HTMLElement|String, { selectionLineWidth: Number }: Object)

로그인 후 복사

Parameters

Element - 이 매개변수는
Options(선택 사항) - 이 매개변수는 캔버스에 대한 추가 사용자 정의를 제공하는 개체입니다. 이 매개변수를 사용하면 색상, 커서, 테두리 너비 등 캔버스와 관련된 여러 속성을 변경할 수 있으며, 그중 SelectionLineWidth가 하나의 속성입니다. 선택 영역 테두리에 사용되는 선의 너비를 결정하는 숫자를 허용합니다. 기본값은 1입니다.

예제 1

selectionLineWidth 키를 클래스에 전달

FabricJS를 사용하여 캔버스에서 선택 영역 테두리의 너비를 설정하는 방법에 대한 코드 예제를 살펴보겠습니다. SelectionLineWidth 매개변수는 숫자를 값으로 허용합니다. 설정한 숫자가 클수록 캔버스 영역의 경계가 넓어집니다.

<!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>Setting the width of the selection area border in canvas using FabricJs</h2>
   <p>Select an area around the object to see the width of the selection area border.</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         selectionLineWidth: 23,
      });
      // Creating an instance of the fabric.Rect class
      var rect = new fabric.Rect({
         left: 170,
         top: 90,
         width: 60,
         height: 80,
         fill: "#006400",
         angle: 90,
      });
      // Adding it to the canvas
      canvas.add(rect);
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

로그인 후 복사

例 예제 2
는 SELECTIONLINEWIDTH와 SelectionColor 및 SelectionBorderColor 속성을 결합하여 선택한 영역의 색상을 별도로 설정하고 선택한 영역의 테두리 색상을 조정할 수 있습니다. 코드가 어떻게 보이는지 살펴보겠습니다.
<!DOCTYPE html> <html> <head>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>Setting the width of selection area border in canvas using Fabric</h2> <p>Select an area around the object to see the selection color and selection border color.</p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas", { selectionLineWidth: 3, selectionColor: "rgba(42,82,190,0.3)", selectionBorderColor: "black", }); // Creating an instance of the fabric.Rect class var rect = new fabric.Rect({ left: 170, top: 90, width: 60, height: 80, fill: "#006400", angle: 90, }); // Adding it to the canvas canvas.add(rect); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); </script> </body> </html>
로그인 후 복사
위 내용은 FabricJS를 사용하여 캔버스의 선택 영역 테두리 너비를 설정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!