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

Syntax

Parameters

예제 2

집

웹 프론트엔드

JS 튜토리얼

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

Sep 07, 2023 pm 02:41 PM

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

이번 글에서는 FabricJS를 이용하여 캔버스에서 선택 영역의 테두리 색상을 설정하는 방법을 알아보겠습니다. 그룹 선택을 활성화해야 하는지 여부를 나타내는 선택입니다. FabricJS에서는 SelectionBorderColor 속성을 사용하여 테두리 색상을 적절하게 조정할 수 있습니다.

Syntax

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

로그인 후 복사

Parameters

Element - 이 매개변수는 <canvas> 요소 자체이며 document.getElementById() 또는 <를 사용하여 요소 자체의 ID에서 파생될 수 있습니다. 캔버스>. FabricJS 캔버스는 이 요소에서 초기화됩니다.
Options(선택 사항) - 이 매개변수는 캔버스에 대한 추가 사용자 정의를 제공하는 개체입니다. 이 매개변수를 사용하면 색상, 커서, 테두리 너비 및 기타 여러 속성과 같은 캔버스와 관련된 속성을 변경할 수 있으며, 그중 SelectionBorderColor는 선택 영역 테두리의 색상을 나타내는 데 사용할 수 있는 속성입니다. SelectionBorderColor 속성의 기본값은 rgba(255,255,255,0.3)입니다.

예제 1

색상 이름을 사용하여 선택 영역 색상 설정

selectionBorderColor 속성은 선택 영역 테두리의 색상을 결정하는 문자열을 허용합니다. 색상은 일반적으로 선택 항목 자체보다 더 어둡습니다. FabricJS를 사용하여 캔버스에서 선택 영역의 테두리 색상을 설정하는 방법을 알아보려면 코드 예제를 살펴보겠습니다.

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
   &lt;!-- Adding the Fabric JS Library--&gt;
   &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
   &lt;h2&gt;Setting the border color of a selection area on a canvas&lt;/h2&gt;
   &lt;p&gt;Select an area around the object. You will notice that the border color of the selection would be red in color. &lt;/p&gt;
   &lt;canvas id=&quot;canvas&quot;&gt;&lt;/canvas&gt;
   &lt;script&gt;
      // Initiate a canvas instance
      var canvas = new fabric.Canvas(&quot;canvas&quot;, {
         selectionBorderColor: &quot;green&quot;,
      });
      // Creating an instance of the fabric.Rect class
      var rect = new fabric.Rect({
         left: 170,
         top: 90,
         width: 60,
         height: 80,
         fill: &quot;#006400&quot;,
         angle: 90,
      });
      // Adding it to the canvas
      canvas.add(rect);
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

로그인 후 복사