FabricJS를 사용하여 직사각형의 제어 모서리 색상을 설정하는 방법은 무엇입니까?
- 王林앞으로
- 2023-09-11 12:01:221436검색
이 튜토리얼에서는 FabricJS를 사용하여 직사각형 제어 모서리의 색상을 설정합니다. cornerColor 속성을 사용하면 객체가 활성화된 동안 컨트롤 모서리의 색상을 조작할 수 있습니다.
Syntax
new fabric.Rect({ cornerColor: String }: Object)Parameters
Options(선택 사항) - 이 매개 변수는 직사각형에 추가 사용자 정의를 제공하는 개체입니다. 이 매개변수를 사용하면 CornerColor를 속성으로 사용하는 개체와 관련된 색상, 커서, 획 너비 및 기타 속성을 변경할 수 있습니다.
Option Key
cornerColor - 이 속성은 개체를 적극적으로 선택할 때 개체 모서리에 대한 색상 할당을 제어할 수 있는 String을 허용합니다. 기본값은 rgb(178,204,255)입니다.
예제 1
cornerColor를 키로 전달하고 색상을 이름으로 값으로 전달
cornColor 속성을 사용하여 색상을 변경하는 코드 예제를 살펴보겠습니다. 존재하다 이 경우 키에 "green" 값을 할당합니다. 컨트롤 모서리가 녹색으로 나타납니다.
<!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 cornerColor as key with a color name as value</h2>
<p>Select the rectangle to see the colour of its controlling corners</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: "#cf1020",
borderColor: "black",
borderScaleFactor: 3,
cornerColor: "green",
});
// Add it to the canvas
canvas.add(rect);
</script>
</body>
</html>예제 2
RGBA 값을 cornerColor 속성
에 할당하기 간단한 색상 이름을 String 값으로 키에 전달하는 대신 RGBA 값을 할당할 수도 있습니다. RGBA는 빨간색, 녹색, 파란색 및 알파를 나타내며 알파는 불투명도입니다. 이를 수행하는 방법을 설명하는 코드 예제를 살펴보겠습니다.
<!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>Assigning an RGBA value to the cornerColor property</h2>
<p>Select the rectangle to see the colour of its controlling corners</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: "#cf1020",
borderColor: "black",
borderScaleFactor: 3,
cornerColor: "rgba(34,139,34,0.9)",
});
// Add it to the canvas
canvas.add(rect);
</script>
</body>
</html>위 내용은 FabricJS를 사용하여 직사각형의 제어 모서리 색상을 설정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
이 기사는 tutorialspoint.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제