FabricJS를 사용하여 개체 위에 커서를 놓을 때까지 기다리는 직사각형을 만드는 방법은 무엇입니까?
Aug 23, 2023 pm 04:29 PM
이 튜토리얼에서는 FabricJS를 사용하여 커서가 그 위에 마우스를 놓을 때까지 기다리는 객체가 포함된 직사각형을 만듭니다. wait는 사용 가능한 기본 커서 스타일 중 하나이며 FabricJS 캔버스에서도 사용할 수 있습니다. FabricJS는 기본 커서를 재사용하는 기본, 전체 스크롤, 십자선, 열 크기 조정, 행 크기 조정 등과 같은 다양한 유형의 커서를 제공합니다. hoverCursor 속성은 커서가 캔버스 객체 위에 있을 때 스타일을 설정합니다.
Syntax
new fabric.Rect({ hoverCursor: String }: Object)Parameters
Options(선택 사항) - 이 매개 변수는 직사각형에 추가 사용자 정의를 제공하는 객체 입니다. 이 매개변수를 사용하면 hoverCursor 속성과 관련된 개체의 색상, 커서, 획 너비 및 기타 여러 속성을 변경할 수 있습니다.
Options Keys
hoverCursor - 이 속성은 캔버스 개체 위로 마우스를 가져가는 데 사용되는 커서의 이름을 결정하는 String을 허용합니다. 이 기능을 사용하면 캔버스의 직사각형 개체 위로 마우스를 가져갈 때 기본 커서 값을 설정할 수 있습니다.
예제 1
hoverCursor 클래스의 키 전달
기본적으로 캔버스의 직사각형 개체 위로 마우스를 가져가면 커서 유형은 이동입니다. FabricJS에서 직사각형 개체 위로 마우스를 가져갈 때 wait 커서가 있는 캔버스를 생성하는 코드 예제를 살펴보겠습니다.
<!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>Passing the hoverCursor key to the class</h2>
<p>Hover over the rectangle to see the wait cursor</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 rectangle object
var rect = new fabric.Rect({
left: 125,
top: 90,
width: 170,
height: 70,
fill: "#faf0e6",
padding: 9,
stroke: "#9370db",
strokeWidth: 5,
hoverCursor: "wait",
});
// Add it to the canvas
canvas.add(rect);
</script>
</body>
</html>예제 2
인스턴스에만 영향을 미친다는 것을 보여줍니다.
이 예에서는 hoverCursor 키를 직사각형 클래스에 전달합니다. 즉, 캔버스에 있는 모든 개체의 hoverCursor 속성은 변경되지 않습니다. . 변경 사항은 해당 단일 개체에 대해서만 발생합니다. 아래 코드 예제는 이를 보여줍니다 -
<!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>Demonstrating that it affects the instance only</h2>
<p>Hover over the rectangle objects to see that wait cursor applies to the left rectangle only. We have not applied the <b>hoverCursor</b> property on the rectangle that is on the right.</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 rectangle object
var rect1 = new fabric.Rect({
left: 55,
top: 90,
width: 170,
height: 70,
fill: "#faf0e6",
padding: 9,
stroke: "#9370db",
strokeWidth: 5,
hoverCursor: "wait",
});
// Initiate another rectangle object
var rect2 = new fabric.Rect({
left: 325,
top: 90,
width: 170,
height: 70,
fill: "#9370db",
padding: 9,
stroke: "#e6e6fa",
strokeWidth: 5,
});
// Add them to the canvas
canvas.add(rect1);
canvas.add(rect2);
</script>
</body>
</html>위 내용은 FabricJS를 사용하여 개체 위에 커서를 놓을 때까지 기다리는 직사각형을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
인기 기사
인기 기사
뜨거운 기사 태그
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7291
9
1622
14
1342
46
1259
25
1206
29
