FabricJS를 사용하여 삼각형에 그림자를 추가하는 방법은 무엇입니까?
- 王林앞으로
- 2023-09-04 09:21:13609검색
이 튜토리얼에서는 FabricJS를 사용하여 삼각형에 그림자를 추가하는 방법을 알아봅니다. Triangle은 FabricJS에서 제공하는 다양한 도형 중 하나입니다. 삼각형을 만들려면 Fabric.Triangle 클래스의 인스턴스를 만들고 이를 캔버스에 추가해야 합니다.
삼각형 개체는 크기 변경, 배경색 추가, 그림자 추가 등 다양한 방법으로 사용자 정의할 수 있습니다. Shadow 속성을 사용하여 삼각형에 그림자를 추가할 수 있습니다.
Syntax
new fabric.Triangle({ shadow : fabric.Shadow }: Object)Parameters
Options(선택 사항) - 이 매개 변수는 삼각형에 추가 사용자 정의를 제공하는 개체입니다. 이 매개변수를 사용하면 색상, 커서, 획 너비 등의 속성과 그림자가 속성인 개체와 관련된 기타 여러 속성을 변경할 수 있습니다.
Option Keys
Shadow - 이 속성은 삼각형 개체에 그림자를 추가할 수 있는 fabric.Shadow 개체를 허용합니다.
예제 1
그림자 객체를 그림자 속성에 전달
삼각형 객체에 그림자를 추가하기 위해 그림자 속성에 값을 할당하는 방법을 이해하기 위해 코드 예제를 살펴보겠습니다. 먼저, 새로운 fabric.Shadow 인스턴스를 생성한 다음 해당 인스턴스를 shadow 속성에 할당해야 합니다.
<!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 the shadow object to the shadow property</h2>
<p>You can see that an orange shadow has been added to the triangle</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 shadow instance
var shadow = new fabric.Shadow({
color: "orange",
blur: 20,
});
// Initiate a triangle object
var triangle = new fabric.Triangle({
left: 120,
top: 70,
width: 90,
height: 80,
fill: "#228b22",
stroke: "#d8e4bc",
strokeWidth: 7,
shadow: shadow,
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>예제 2
그림자 객체에 RGBA 값 전달
빨간색, 녹색, 파란색, 알파를 나타내는 RGBA 값을 지정하여 그림자를 조정하고 흐릿한 모양을 줄 수도 있습니다. 알파는 색상의 불투명도를 결정합니다.
rreee위 내용은 FabricJS를 사용하여 삼각형에 그림자를 추가하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!