FabricJS를 사용하여 원을 보이지 않게 만드는 방법은 무엇입니까?
- WBOY앞으로
- 2023-08-26 22:49:11739검색
이 튜토리얼에서는 FabricJS를 사용하여 원을 보이지 않게 만드는 방법을 알아봅니다. Circle은 FabricJS에서 제공하는 다양한 도형 중 하나입니다. 원을 만들려면 fabric.Circle 클래스의 인스턴스를 만들어 캔버스에 추가해야 합니다. 원 개체는 크기 변경, 배경색 추가, 표시 여부 지정 등 다양한 방법으로 사용자 정의할 수 있습니다. visible 속성을 사용하여 이를 달성할 수 있습니다.
Syntax
new fabric.Circle( { visible: Boolean }: Object)Parameters
options(선택 사항) - 이 매개 변수는 원의 추가 사용자 정의를 위한 옵션을 제공하는 object입니다. 이 매개변수를 사용하면 색상, 커서, 획 너비 및 visible이 포함된 기타 여러 속성 등 이 개체와 관련된 속성을 변경할 수 있습니다.
Option key
visible - 이 속성은 개체를 캔버스에 렌더링할 수 있는 boolean 값을 허용합니다. 기본값은 True입니다.
예제 1
visible 속성을 키로 전달하고 'true' 값을 지정합니다.
visible 속성에 True 값을 전달하면 어떤 일이 발생하는지 이해하기 위해 코드를 살펴보겠습니다. 값을 'true'로 지정하면 원 개체가 캔버스에 렌더링됩니다. 이는 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>Making a circle invisible using FabricJS</h2>
<p>Here, the circle is visible because we have set <b>visible</b> to True. This is the default behavior. So, even if we don't apply the <b>visible</b> property, it will be set to True, by defalt. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var cir = new fabric.Circle({
left: 215,
top: 100,
fill: "#adff2f",
radius: 50,
stroke: "#228b22",
visible: true
});
// Adding it to the canvas
canvas.add(cir);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>예제 2
visible 속성을 키로 전달하고 이를 'false' 값으로 설정합니다.
이 예에서는 visible 속성을 키로 전달하고 이를 False 값으로 설정합니다. 이 값을 false로 설정하면 원 개체가 캔버스에 렌더링되지 않습니다. 객체를 '보이지 않게' 만드는 것이 아니라 완전히 제거합니다. 코드를 삭제하지 않고 캔버스에서 개체를 제거하는 데 사용할 수 있습니다.
rreee위 내용은 FabricJS를 사용하여 원을 보이지 않게 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!