FabricJS를 사용하여 원에 획을 추가하는 방법은 무엇입니까?
Aug 24, 2023 pm 05:57 PM
이 튜토리얼에서는 FabricJS를 사용하여 원에 획을 추가하는 방법을 알아봅니다. 원은 FabricJS에서 제공하는 다양한 모양 중 하나입니다. 원을 만들기 위해 Fabric.Circle 클래스의 인스턴스를 만들어 캔버스에 추가하겠습니다. 원 개체는 크기 변경, 배경색 추가, 개체 주위에 그려진 선 색상 변경 등 다양한 방법으로 사용자 정의할 수 있습니다. 스트로크 속성을 사용하여 이를 수행할 수 있습니다.
Syntax
new fabric.Circle({ stroke : String }: Object)Parameters
Options(선택 사항) - 이 매개 변수는 서클에 대한 추가 사용자 정의를 제공하는 object< /em>입니다. 이 매개변수를 사용하면 색상, 커서, 획 너비 등의 속성과 Stroke이 속성인 개체와 관련된 기타 여러 속성을 변경할 수 있습니다.
Stroke - 이 속성은 String< /strong>을 허용하고 이 개체의 테두리 색상을 결정합니다.
Option Key
예제 1
Stroke를 16진수 값의 키로 전달
lines 속성을 사용할 때 원형 객체가 어떻게 표시되는지 이해하기 위해 예를 살펴보겠습니다. 16진수 색상 코드는 "#"으로 시작하고 그 뒤에 색상을 나타내는 6자리 숫자가 옵니다. 이 예에서는 주황색-빨간색인 "#ff4500"을 사용했습니다.
<!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>Adding stroke to a circle using FabricJS</h2>
<p>Notice the orange-red outline around the circle. It appears as we have applied the <b>stroke</b> property and assigned it a hexadecimal color code. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var circle = new fabric.Circle({
left: 50,
top: 90,
radius: 50,
fill: "#4169e1",
stroke: "#ff4500",
strokeWidth: 5
});
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>예제 2
'rgba' 값을 lines 속성
에 전달하기 이 예에서는 스트로크 속성에 rgba 값을 할당하는 방법을 살펴보겠습니다. 16진수 색상 코드 대신 빨간색, 파란색, 녹색 및 알파를 나타내는 RGBA 값을 사용할 수 있습니다. 알파 매개변수는 색상의 불투명도를 지정합니다. 이 예에서는 불투명도가 0.5인 주황색-빨간색인 rgba 값(255,69,0,0.5)을 사용했습니다.
rreee위 내용은 FabricJS를 사용하여 원에 획을 추가하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
인기 기사
인기 기사
뜨거운 기사 태그
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7313
9
1625
14
1348
46
1260
25
1207
29
