FabricJS를 사용하여 타원의 제어 모서리를 투명하게 만드는 방법은 무엇입니까?
- WBOY앞으로
- 2023-08-24 18:33:02545검색
이 튜토리얼에서는 FabricJS를 사용하여 Ellipse의 제어 모서리를 투명하게 만드는 방법을 알아봅니다. 타원은 FabricJS에서 제공하는 다양한 모양 중 하나입니다. 타원을 생성하기 위해 Fabric.Ellipse 클래스의 인스턴스를 생성하고 이를 캔버스에 추가하겠습니다. transparentCorners 속성을 사용하면 타원의 제어 모서리를 투명하게 만들 수 있습니다.
Syntax
new fabric.Ellipse( { transparentCorners: Boolean }: Object)Parameters
Options(선택 사항) - 이 매개 변수는 타원에 대한 추가 사용자 정의를 제공하는 object입니다. 이 매개변수를 사용하면 transparentCorners 속성이 있는 개체와 관련된 색상, 커서, 획 너비 및 기타 여러 속성을 변경할 수 있습니다.
Options Keys
transparentCorners - 이 속성은 개체의 제어 모서리를 투명하게 렌더링할 수 있는 Boolean 값을 허용합니다. 기본값은 True입니다.
예제 1
transparentCorners 속성을 값이 "false"인 키로 전달
불투명한 제어 모서리가 있는 타원 객체를 생성하는 코드를 살펴보겠습니다. 이를 달성하려면 transparentCorners 속성에 "false" 값을 전달해야 합니다.
<!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 make controlling corners of Ellipse transparent using FabricJS?</h2>
<p>Select the object and you will notice that the controlling corners are not transparent. Here we have set the <b>transparentCorners</b> property to False. </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: 100,
ry: 70,
fill: "red",
transparentCorners: false,
});
// Adding it to the canvas
canvas.add(ellipse);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>예제 2
"true" 값을 가진 키로 transparentCorners 전달
이 예에서는 transparentCorners 속성을 "true" 값으로 전달합니다. 이렇게 하면 컨트롤 모서리가 투명하게 렌더링됩니다. 이는 기본 동작이기도 합니다.
rreee위 내용은 FabricJS를 사용하여 타원의 제어 모서리를 투명하게 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!