FabricJS를 사용하여 직사각형의 제어 모서리 색상을 설정하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

FabricJS를 사용하여 직사각형의 제어 모서리 색상을 설정하는 방법은 무엇입니까?

王林

풀어 주다： 2023-09-11 12:01:22

앞으로

1533명이 탐색했습니다.

如何使用 FabricJS 设置矩形控制角的颜色？

이 튜토리얼에서는 FabricJS를 사용하여 직사각형 제어 모서리의 색상을 설정합니다. cornerColor 속성을 사용하면 객체가 활성화된 동안 컨트롤 모서리의 색상을 조작할 수 있습니다.

Syntax

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

로그인 후 복사

Parameters

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

Option Key

cornerColor - 이 속성은 개체를 적극적으로 선택할 때 개체 모서리에 대한 색상 할당을 제어할 수 있는 String을 허용합니다. 기본값은 rgb(178,204,255)입니다.

예제 1

cornerColor를 키로 전달하고 색상을 이름으로 값으로 전달

cornColor 속성을 사용하여 색상을 변경하는 코드 예제를 살펴보겠습니다. 존재하다 이 경우 키에 "green" 값을 할당합니다. 컨트롤 모서리가 녹색으로 나타납니다.

<!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 cornerColor as key with a color name as value</h2>
   <p>Select the rectangle to see the colour of its controlling corners</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: "#cf1020",
         borderColor: "black",
         borderScaleFactor: 3,
         cornerColor: "green",
      });

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

로그인 후 복사

예제 2

RGBA 값을 cornerColor 속성

에 할당하기 간단한 색상 이름을 String 값으로 키에 전달하는 대신 RGBA 값을 할당할 수도 있습니다. RGBA는 빨간색, 녹색, 파란색 및 알파를 나타내며 알파는 불투명도입니다. 이를 수행하는 방법을 설명하는 코드 예제를 살펴보겠습니다.

<!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>Assigning an RGBA value to the cornerColor property</h2>
   <p>Select the rectangle to see the colour of its controlling corners</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: "#cf1020",
         borderColor: "black",
         borderScaleFactor: 3,
         cornerColor: "rgba(34,139,34,0.9)",
      });

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

로그인 후 복사

위 내용은 FabricJS를 사용하여 직사각형의 제어 모서리 색상을 설정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!