資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何使用 Fabric.js 更改畫布型別文字的角樣式？
Fabric.JS 的 fabric.Text 物件用於更改畫布型別文字的角樣式。Fabric.js 的 Text 類使用 fabric.Text 物件提供文字抽象，允許我們以面向物件的方式處理文字。與 canvas 類相比，Text 類提供了更豐富的功能。
文字物件包含不同的屬性，但是更改角的樣式和渲染畫布文字可以使用其中一個樣式屬性，即 cornerStyle 屬性來完成。如果 cornerStyle 為預設值，則返回 rect，否則該屬性的值定義為 circle。
Fabric.js 是一個功能強大且簡單的 HTML 5 canvas 庫，它速度快且功能豐富。圓形、矩形、橢圓形和多邊形包含數百個甚至更多簡單的路徑。為此，我們可以移動、縮放，並且可以使用滑鼠旋轉這些物件，並且可以修改諸如透明度、顏色和 z-index 等屬性。
語法
以下是文字的語法：
fabric.Text(text, cornerStyle: string);
引數
text − 用於指定要寫入的文字
cornerStyle − 用於指定角樣式，可以是 rect 和 circle。預設角樣式為 rect。
示例 1
在這個例子中，我們需要使用 CDN 匯入 Fabric.js 庫，該庫用於在 HTML 文件的 body 標籤中建立畫布塊，其中包含文字。現在，我們將初始化 Fabric.js 庫提供的 Canvas 和 Text 例項，它有助於使用 cornerStyle 屬性更改文字的角樣式並在畫布上渲染文字。這裡我們將屬性值定義為 circle。
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"></script>
</head>
<body>
<h2>Changing the corner style of a canvas-type text</h2>
<p>Select the textbox to see that the controlling corners.</p>
<p>Corner style is changed to "circle".</p>
<canvas id="canvas" width="300" height="200"></canvas>
<script>
var canvas = new fabric.Canvas("canvas");
var mytext = new fabric.Text('Welcome to Tutorials Point', {
cornerStyle: 'circle',
top: 50,
left: 50,
});
canvas.add(mytext);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(350);
</script>
</body>
</html>
讓我們來看另一個例子，我們使用 Fabric.js 將角樣式定義為畫布型別文字的預設值。
示例 2
在下面的示例中，我們將初始化 Fabric.js 庫提供的 Canvas 和 Text 例項，它有助於使用 cornerStyle 屬性更改文字的角樣式並在畫布上渲染文字。這裡我們將屬性定義為預設值，表示 rect。
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"></script>
</head>
<body>
<h2>Changing the corner style of a canvas-type text</h2>
<p>Select the textbox to see that the controlling corners.</p>
<p>Corner style is changed to "rect".</p>
<canvas id="canvas" width="250" height="350"></canvas>
<script>
var canvas = new fabric.Canvas("canvas");
var content = new fabric.Text('Welcome to Tutorials Point', {
cornerStyle: 'rect',
top: 50,
left: 50,
});
canvas.add(content);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
結論
在本文中，我們演示瞭如何更改畫布型別文字的角樣式以及示例。我們在這裡看到了兩個不同的示例，在第一個示例中，我們使用了 text 類和 cornerStyle 屬性事件透過將角樣式定義為 circle 來更改畫布型別文字的角樣式。在第二個示例中，我們使用了 text 類和 cornerStyle 屬性事件透過將角樣式定義為 rect（角樣式的預設值）來更改畫布型別文字的角樣式。
353 次瀏覽
