FabricJS를 사용하여 움직이는 객체에 대기 커서가 있는 삼각형을 만드는 방법은 무엇입니까?
- PHPz앞으로
- 2023-09-10 14:45:141484검색
이 튜토리얼에서는 FabricJS를 사용하여 커서가 움직이기를 기다리는 객체가 있는 삼각형을 만듭니다. wait는 사용 가능한 기본 커서 스타일 중 하나이며 FabricJS 캔버스에서도 사용할 수 있습니다. FabricJS는 내부적으로 기본 커서를 재사용하는 기본, 전체 스크롤, 십자선, 열 크기 조정, 행 크기 조정 등과 같은 다양한 유형의 커서를 제공합니다.
moveCursor 속성은 개체가 캔버스에서 움직일 때 커서의 스타일을 설정합니다.
Syntax
new fabric.Triangle({ moveCursor: String }: Object)Parameters
Options(선택 사항) - 이 매개 변수는 삼각형에 추가 사용자 정의를 제공하는 object입니다. 이 매개변수를 사용하면 색상, 커서, 획 너비 및 기타 여러 속성과 같이 moveCursor가 속성인 개체와 관련된 속성을 변경할 수 있습니다.
moveCursor - 이 속성은 캔버스 주위에서 이 삼각형 개체를 이동할 때 기본 커서 값을 설정할 수 있는 String을 허용합니다. 이 값은 캔버스 개체를 이동할 때 사용되는 커서 유형을 결정합니다.
Option Key
예제 1
캔버스에서 객체가 이동할 때 기본 커서 값
기본적으로 캔버스에서 삼각형 객체 주위를 이동할 때 커서 유형은 Move입니다. 이를 이해하기 위해 코드 예제를 살펴보겠습니다.
<!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>Default cursor value when object is moved around the canvas</h2>
<p>You can move around the triangle to see that the default cursor type is "move"</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 triangle object
var triangle = new fabric.Triangle({
left: 105,
top: 75,
width: 90,
height: 80,
fill: "#eedc82",
stroke: "#bcb88a",
strokeWidth: 5,
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>예제 2
moveCursor 속성을 값의 키로 전달
이 예에서는 moveCursor 키를 값이 "await"인 삼각형 클래스에 전달합니다. 이렇게 하면 캔버스의 개체 주위를 이동하는 동안 커서 값이 대기하게 됩니다. 다음 코드 예제에서는 이를 보여줍니다.
rreee위 내용은 FabricJS를 사용하여 움직이는 객체에 대기 커서가 있는 삼각형을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!