FabricJS를 사용하여 타원의 불투명도를 설정하는 방법은 무엇입니까?
- WBOY앞으로
- 2023-08-24 16:09:131194검색
이 튜토리얼에서는 FabricJS를 사용하여 타원의 불투명도를 설정하는 방법을 알아봅니다. 타원은 FabricJS에서 제공하는 다양한 모양 중 하나입니다. 타원을 생성하려면 Fabric.Ellipse 클래스의 인스턴스를 생성하여 캔버스에 추가해야 합니다. 채우기 색상을 추가하고 테두리를 제거하고 치수를 변경하여 타원 개체를 사용자 정의할 수 있습니다. 마찬가지로 opacity 속성을 사용하여 불투명도를 변경할 수도 있습니다.
Syntax
new fabric.Ellipse({ opacity: Number }: Object)Parameters
Options(선택 사항) - 이 매개 변수는 타원에 추가 사용자 정의를 제공하는 Object입니다. 이 매개변수를 사용하면 불투명도가 속성인 개체와 관련된 색상, 커서, 테두리 너비 및 기타 여러 속성을 변경할 수 있습니다.
Option Key
Opacity - 이 속성은 개체의 불투명도를 제어할 수 있는 number强>를 허용합니다. opacity 속성의 기본값은 1입니다.
예제 1
타원 개체의 기본 모양
타원 개체가 opacity 속성의 기본값을 사용하여 어떻게 보이는지 코드 조각을 살펴보겠습니다. 이 예에서는 아래와 같이 클래스에 불투명 키를 전달하지 않습니다.
<!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>How to set the opacity of Ellipse using FabricJS?</h2>
<p>Observe that here we have not used the <b>opacity</b> property, so by default, it takes the value 1. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
// Initiate an ellipse instance
var ellipse = new fabric.Ellipse({
left: 115,
top: 50,
rx: 80,
ry: 50,
fill: "#ff1493",
});
// Adding it to the canvas
canvas.add(ellipse);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>예제 2
opacity 속성을 키로 전달
이 예에서는 opacity 값을 할당하는 방법을 살펴보겠습니다. 속성은 캔버스에 있는 타원 개체의 불투명도를 변경합니다. 여기서는 타원 객체가 완전히 불투명하지 않고 반투명하게 보이도록 불투명도로 0.3을 사용하고 있습니다.
rreee위 내용은 FabricJS를 사용하여 타원의 불투명도를 설정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!