FabricJS를 사용하여 크기를 조정할 때 타원의 획 너비를 유지하는 방법은 무엇입니까?
- 王林앞으로
- 2023-08-30 19:25:111115검색
이 튜토리얼에서는 FabricJS를 사용하여 크기를 조정할 때 타원의 획 너비를 유지하는 방법을 알아봅니다. 기본적으로 획 너비는 개체의 비율 값에 따라 증가하거나 감소합니다. 그러나 StrokeUniform 속성을 사용하여 이 동작을 비활성화할 수 있습니다.
Syntax
new fabric.Ellipse({ strokeUniform: Boolean }: Object)Parameters
Options(선택 사항) - 이 매개 변수는 타원에 추가 사용자 정의를 제공하는 개체입니다. 이 매개변수를 사용하면 styleUniform이 속성인 개체와 관련된 색상, 커서, 획 너비 및 기타 여러 속성을 변경할 수 있습니다.
옵션 키
획 균일 - 이 속성은 획 너비가 개체에 따라 확장되는지 여부를 지정할 수 있는 부울 값을 허용합니다. 기본값은 False입니다.
예 1
객체의 크기를 조절할 때 획 너비의 기본 모양
다음 예에서는 크기가 조절되는 타원 객체의 획 너비의 기본 모양을 설명합니다. tripUniform 속성을 사용하지 않기 때문에 획 너비도 개체의 크기 조정에 영향을 받습니다.
<!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>How to maintain stroke width of Ellipse while scaling using FabricJS?</h2>
<p>Select the object and stretch it horizontally or vertically. Here the stroke width will get affected while scaling the object up or down. This is the default behavior. Here we have not used the <b>strokeUniform</b> property. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
// Initiate an ellipse instance
var ellipse = new fabric.Ellipse({
left: 215,
top: 100,
fill: "blue",
rx: 90,
ry: 50,
stroke: "#c154c1",
strokeWidth: 15,
});
canvas.add(ellipse);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>예제 2
StrokeUniform 속성을 키로 전달
이 예에서는 StrokeUniform 특성을 키로 전달합니다. 따라서 개체의 크기가 조정될 때 개체의 획이 더 이상 증가하거나 감소하지 않습니다. 이 예에서는 StrokeUniform 속성에 "true" 값이 할당되어 획이 항상 획 너비에 입력된 정확한 픽셀 크기와 일치하도록 합니다. rreee
위 내용은 FabricJS를 사용하여 크기를 조정할 때 타원의 획 너비를 유지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!