FabricJS를 사용하여 원의 불투명도를 설정하는 방법은 무엇입니까?
- WBOY앞으로
- 2023-09-03 17:17:07574검색
이 튜토리얼에서는 FabricJS를 사용하여 원의 불투명도를 설정하는 방법을 배웁니다. 원은 FabricJS에서 제공하는 다양한 모양 중 하나입니다. 원을 만들기 위해 Fabric.Circle 클래스의 인스턴스를 만들어 캔버스에 추가하겠습니다. 채우기 색상을 추가하고 테두리를 제거하고 치수를 변경하여 원형 개체를 사용자 정의할 수 있습니다. 마찬가지로 opacity 속성을 사용하여 불투명도를 변경할 수도 있습니다.
Syntax
new fabric.Circle({ opacity: Number }: Object)Parameters
Options(선택 사항) - 이 매개 변수는 서클에 대한 추가 사용자 정의를 제공하는 object입니다. 이 매개변수를 사용하면 opacity가 속성
option key
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>Setting the opacity of Circle using FabricJS</h2>
<p>Here we haven't used the <b>opacity</b> property, but by default, it is set to 1. This is the default appearance. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var circle = new fabric.Circle({
left: 115,
top: 50,
radius: 50,
fill: "#ff1493"
});
// Adding it to the canvas
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>예제 2
불투명도 속성을 키로 전달
이 예에서는 불투명도 속성에 값을 할당하면 캔버스에 있는 원형 개체의 불투명도가 어떻게 변경되는지 살펴보겠습니다. 여기서는 불투명도로 0.3을 사용하여 둥근 객체를 완전히 불투명한 것이 아니라 반투명하게 보이게 합니다.
rreee위 내용은 FabricJS를 사용하여 원의 불투명도를 설정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
이 기사는 tutorialspoint.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
이전 기사：실용적인 테스트 중심 개발 방법다음 기사：실용적인 테스트 중심 개발 방법