FabricJS를 사용하여 직사각형의 채우기 색상을 설정하는 방법은 무엇입니까?
- WBOY앞으로
- 2023-09-21 08:13:241332검색
이 튜토리얼에서는 직사각형의 모양을 변경하는 방법을 배웁니다. FabricJS를 사용하여 개체의 채우기 색상을 변경합니다. 직사각형은 여러 도형 중 하나이다 FabricJS로 구동됩니다. 직사각형을 생성하려면 인스턴스를 생성해야 합니다. Fabric.Rect 클래스를 만들어 캔버스에 추가합니다.
다음을 지정할 수 있는 채우기 속성을 사용하여 채우기 색상을 변경할 수 있습니다. 개체 채우기의 색상입니다.
Syntax
new fabric.Rect({ fill: String }: Object)Parameters
Options(선택 사항) - 이 매개 변수는 직사각형에 추가 사용자 정의를 제공하는 개체입니다. 이 매개변수를 사용하면 색상, 커서, 획 너비 등 속성으로 채워진 개체와 관련된 기타 여러 속성을 변경할 수 있습니다.
Option Key
fill - 이 속성은 개체의 채우기 색상을 변경할 수 있는 String을 허용합니다. 기본값은 rgb(0,0,0)이며 검정색입니다.
예제 1
사각형 개체의 기본 채우기 색상
사각형 개체의 기본 채우기 색상을 보여주는 코드 예제를 살펴보겠습니다. FabricJS. 직사각형 객체를 생성할 때 채우기 속성을 완전히 건너뛰면 렌더링할 때 채우기 색상은 검정색입니다.
<!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>Default fill colour of a rectangle object</h2>
<p>You can click on the rectangle and interact with it</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,
borderColor: "purple",
borderScaleFactor: 3,
});
// Add it to the canvas
canvas.add(rect);
</script>
</body>
</html>예 2
fill 속성을 키로 전달
채우기 속성에 색상 이름이나 RGBA 값을 할당할 수도 있습니다. 이 예에서는 이에 따라 채우기 색상을 변경하면서 "회색" 값을 지정했습니다.
rreee위 내용은 FabricJS를 사용하여 직사각형의 채우기 색상을 설정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
이 기사는 tutorialspoint.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제