목차
FabricJS를 사용하여 크기를 조정할 때 직사각형의 획 너비를 유지하는 방법은 무엇입니까?
이 튜토리얼에서는 FabricJS를 사용하여 크기를 조정할 때 직사각형의 획 너비를 유지하는 방법을 알아봅니다. 기본적으로 획 너비는 개체의 비율 값에 따라 증가하거나 감소합니다. 그러나 strokeUniform 속성을 사용하면 이 동작을 비활성화할 수 있습니다.
구문
new fabric.Rect({ 스트로크Uniform: Boolean }: Object)로그인 후 복사
매개변수< ;/ h2>옵션(선택 사항)− 이 매개변수는 직사각형 정의에 대한 추가 사용자 정의를 제공하는 개체입니다. 이 매개변수를 사용하면 색상, 커서, 획 너비 및 strokeUniform 속성과 관련된 기타 여러 속성을 변경할 수 있습니다.
옵션 키
strokeUniform< Strong>− 이 속성은 부울 값을 허용하여 획 너비가 개체에 따라 조정되는지 여부를 지정할 수 있습니다. 기본값은 false입니다.
예 1
옵션(선택 사항)− 이 매개변수는 직사각형 정의에 대한 추가 사용자 정의를 제공하는 개체입니다. 이 매개변수를 사용하면 색상, 커서, 획 너비 및 strokeUniform 속성과 관련된 기타 여러 속성을 변경할 수 있습니다.
strokeUniform< Strong>− 이 속성은 부울 값을 허용하여 획 너비가 개체에 따라 조정되는지 여부를 지정할 수 있습니다. 기본값은 false입니다.
객체 크기를 조절할 때 획 너비의 기본 모양< /p>
크기가 조절되는 직사각형 개체의 획 너비의 기본 모양을 설명하는 코드 예제를 살펴보겠습니다. strokeUniform 속성을 사용하지 않기 때문에 획 너비도 개체의 크기 조정에 영향을 받습니다.
<!DOCTYPE html>
<html>의 중국어 번역은 다음과 같습니다. <html>
<머리>
<!-- Fabric JS 라이브러리 추가 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>의 중국어 번역은 다음과 같습니다. </head>
<body>의 중국어 번역은 다음과 같습니다.
<h2 id="객체-크기-조절-시-획-너비의-기본-모양">객체 크기 조절 시 획 너비의 기본 모양</h2>
<p>기본 동작을 보려면 개체의 크기를 조정해 보세요</p>
<canvas id="canvas"></canvas>
<script>의 중국어 번역은 다음과 같습니다. <script>
// 캔버스 인스턴스 초기화
var canvas = new fabric.Canvas("캔버스");
Canvas.setWidth(document.body.scrollWidth);
Canvas.setHeight(250);
// 직사각형 객체 초기화
var ect = 새 fabric.Rect({
왼쪽: 55,
상단: 90,
폭: 170,
키: 70,
채우기의 중국어 번역: "#ccccff"는 다음과 같습니다: 채우기: "#ccccff",
패딩: 9,
뇌졸중: "#483d8b",
스트로크폭: 5,
});
//캔버스에 추가
Canvas.add(직사각형);
</스크립트>
</body>의 중국어 번역은 다음과 같습니다. </body>
</html>로그인 후 복사
예
StrokeUniform 속성을 키로 전달
예제에서는 , 스트로크유니폼 속성을 키로 전달하고 값으로 true를 전달합니다. 따라서 개체의 스트로크가 더 이상 증가하거나 감소하지 않습니다. 개체의 크기 조정을 통해 획이 항상 픽셀 크기와 정확하게 일치하는지 확인할 수 있습니다. 입력 내용은 획 너비에 대해 입력되었습니다.
<!DOCTYPE html>
<html>의 중국어 번역은 다음과 같습니다. <html>
<머리>
<!-- Fabric JS 라이브러리 추가 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>의 중국어 번역은 다음과 같습니다. </head>
<body>의 중국어 번역은 다음과 같습니다.
<h2 id="StrokeUniform-속성을-키로-전달">StrokeUniform 속성을 키로 전달</h2>
<p>객체의 크기를 조정하여 획이 균일한 너비로 유지되는지 확인하세요</p>
<canvas id="canvas"></canvas>
<script>의 중국어 번역은 다음과 같습니다. <script>
// 캔버스 인스턴스 초기화
var canvas = new fabric.Canvas("캔버스");
Canvas.setWidth(document.body.scrollWidth);
Canvas.setHeight(250);
// 직사각형 객체 초기화
var ect = 새 fabric.Rect({
왼쪽: 55,
상단: 90,
폭: 170,
키: 70,
채우기의 중국어 번역: "#ccccff"는 다음과 같습니다: 채우기: "#ccccff",
패딩: 9,
뇌졸중: "#483d8b",
스트로크폭: 5,
스트로크유니폼: true,
});
//캔버스에 추가
Canvas.add(직사각형);
</스크립트>
</body>의 중국어 번역은 다음과 같습니다. </body>
</html>로그인 후 복사