FabricJS를 사용하여 점선 패턴 테두리가 있는 삼각형을 만드는 방법은 무엇입니까?-JS 튜토리얼-php.cn

FabricJS를 사용하여 점선 패턴 테두리가 있는 삼각형을 만드는 방법은 무엇입니까?

WBOY

풀어 주다： 2023-08-23 18:37:02

앞으로

1108명이 탐색했습니다.

如何使用 FabricJS 创建带有虚线图案边框的三角形？

이 튜토리얼에서는 FabricJS를 사용하여 점선 패턴 테두리가 있는 삼각형을 만듭니다. Triangle은 FabricJS에서 제공하는 다양한 도형 중 하나입니다. 삼각형을 만들려면 Fabric.Triangle 클래스의 인스턴스를 만들어 캔버스에 추가해야 합니다.

borderDashArray 속성을 사용하여 테두리 대시의 모양을 변경할 수 있습니다. 그러나 이 속성이 작동하려면 삼각형 객체에 테두리가 있어야 합니다. hasBorders 속성에 잘못된 값이 지정된 경우 이 속성은 아무런 효과가 없습니다.

Syntax

new fabric.Triangle({ borderDashArray: Array }: Object)

로그인 후 복사

Parameters

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

Options Keys

borderDashArray - 이 속성은 허용됩니다. 지정된 대시 Array배열을 통해 간격의 패턴을 선언합니다.

예제 1

맞춤 값을 사용하여 borderDashArray를 키로 전달

FabricJS의 borderDashArray 속성을 사용하여 점선 패턴 테두리를 생성하는 코드 예제를 살펴보겠습니다. 이 예에서는 [7,10] 배열을 사용합니다. 이는 7px 긴 선을 그리고 그 뒤에 10px 간격을 두고 이 동일한 패턴을 계속해서 반복하여 패턴이 생성된다는 것을 알려줍니다.

<!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 borderDashArray as key with a custom value</h2>
   <p>Select the triangle to see the dash pattern</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 triangle object
      var triangle = new fabric.Triangle({
         left: 105,
         top: 60,
         width: 100,
         height: 70,
         fill: "#deb887",
         borderColor: "red",
         borderDashArray: [7, 10],
      });

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

로그인 후 복사

예제 2

값이 "false"인 hasBorders 키 전달

이 예에서 볼 수 있듯이 borderColor 및 borderDashArray 속성에 올바른 값을 할당했지만 작동하지 않습니다. hasBorders 속성이 false로 설정되었기 때문에 작동합니다. False로 설정하면 개체의 경계 상자가 렌더링되지 않습니다.
rreee
위 내용은 FabricJS를 사용하여 점선 패턴 테두리가 있는 삼각형을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!