資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝學
法學使用FabricJS縮放時如何保持橢圓的描邊寬度？
在本教程中，我們將學習如何使用FabricJS在縮放時保持橢圓的描邊寬度。預設情況下，描邊寬度會根據物件的縮放值進行增減。但是，我們可以使用`strokeUniform`屬性停用此行為。
語法
new fabric.Ellipse({ strokeUniform: Boolean }: Object)引數
options (可選) − 此引數是一個物件，它為我們的橢圓提供額外的自定義。使用此引數可以更改與物件的許多屬性相關聯的顏色、游標、描邊寬度等等，其中`strokeUniform`是一個屬性。
選項鍵
strokeUniform − 此屬性接受一個布林值，允許我們指定描邊寬度是否會隨物件一起縮放。其預設值為**false**。
示例1
縮放物件時描邊寬度的預設外觀
下面的示例描述了正在縮放的橢圓物件的描邊寬度的預設外觀。由於我們沒有使用`strokeUniform`屬性，因此描邊寬度也會受到物件縮放的影響。
<!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”，這將確保描邊始終與為描邊寬度輸入的精確畫素大小匹配。
<!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>Maintaining the stroke width of an Ellipse while scaling using FabricJS</h2>
<p>Select the object and stretch it in any direction. Here the stroke width of the ellipse will remain unaffected at the time of scaling up because we have applied 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,
strokeUniform: true,
});
// Adding it to the canvas
canvas.add(ellipse);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
更新於：2022年5月24日
385 次瀏覽
廣告