이 튜토리얼에서는 FabricJS를 사용하여 Line 객체의 여러 특정 제어점을 비활성화하는 방법을 알아봅니다. Line 요소는 FabricJS에서 제공하는 기본 요소 중 하나입니다. 직선을 만드는 데 사용됩니다. 선 요소는 기하학적으로 1차원이고 내부가 포함되어 있지 않으므로 채워지지 않습니다. Fabric.Line의 인스턴스를 생성하고 선의 x 및 y 좌표를 지정하고 이를 캔버스에 추가하여 선 개체를 생성할 수 있습니다. Line 개체의 여러 특정 제어점을 비활성화하려면 setControlsVisibility 메서드를 사용합니다.
setControlsVisibility(options: Object): fabric.Object
Options - 이 매개변수는 컨트롤을 설정하는 개체 값을 허용합니다. 가능한 값은 -
'tl'입니다. - 이 속성은 왼쪽 상단 컨트롤을 활성화하거나 비활성화하는 Boolean 값을 허용합니다.
'tr' - 이 속성은 오른쪽 상단 컨트롤을 활성화하거나 비활성화하는 Boolean 값을 허용합니다.
'br' - 이 속성은 하단 컨트롤 오른쪽 컨트롤을 활성화하거나 비활성화하는 boolean 값을 허용합니다.
'bl' - 이 속성은 왼쪽 하단 컨트롤을 활성화하거나 비활성화하기 위해 Boolean 값을 허용합니다.
'ml' - 이 속성은 Boolean 값을 허용하여 왼쪽 하단 컨트롤을 비활성화합니다. < /p>
'mt' - 이 속성은 중간 상단 컨트롤을 활성화하거나 비활성화하는 boolean 값을 허용합니다.
'mr' - 이 속성은 중앙 오른쪽 컨트롤을 활성화하거나 비활성화하는 boolean 값을 허용합니다.
< /li>'mb' - 이 속성은 중앙 하단 컨트롤을 활성화하거나 비활성화하는 boolean 값을 허용합니다.
'mtr' - 이 속성은 중앙 상단 회전 제어를 활성화하거나 비활성화하는 boolean 값을 허용합니다.
setControlsVisibilitymethod를 사용할 때의 출력을 확인하기 위해 코드 예제를 살펴보겠습니다. setControlsVisibility 메서드는 지정된 여러 컨트롤의 가시성을 설정합니다. 이 예에서는 "tl" 및 "bl" 컨트롤에 잘못된 값을 전달했기 때문에 왼쪽 상단 및 왼쪽 하단 컨트롤이 비활성화됩니다.
으아악이 예에서는 setControlsVisibility< /i> 메서드를 사용하여 "mtr" 컨트롤(중간 상단 회전이라고도 함)을 비활성화합니다. 제어.
<!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>Using setControlsVisibility method</h2>
<p>
You can select the line object to see that the bottom-left and top-left controls have been disabled
</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 Line object
var line = new fabric.Line([200, 100, 100, 40], {
stroke: "blue",
strokeWidth: 6,
});
// Add it to the canvas
canvas.add(line);
// Using setControlsVisibility method
line.setControlsVisibility({
tl: false,
bl: false,
});
</script>
</body>
</html>
위 내용은 FabricJS - Line 객체의 여러 특정 제어점을 비활성화하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
