資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究FabricJS – 檢查多邊形快取是否髒以及是否需要渲染器？
我們可以透過建立 fabric.Polygon 的例項來建立一個 Polygon 物件。多邊形物件可以用任何由一組連線的直線段組成的封閉形狀來表示。由於它是 FabricJS 的基本元素之一，因此我們也可以透過應用角度、不透明度等屬性輕鬆自定義它。
我們可以使用 isCacheDirty 方法檢查快取是否髒以及是否需要渲染器。此方法檢查快取是否髒，從而讓 FabricJS 知道畫布中的某些內容已更改，需要重新渲染。
語法
isCacheDirty( skipCanvas: Boolean )
引數
skipCanvas (可選) − 此引數接受一個 布林值，當設定為 true 時，跳過畫布檢查，因為物件繪製在父畫布上。
示例 1：使用 isCacheDirty 方法
讓我們來看一個程式碼示例，以檢視使用 isCacheDirty 方法時的日誌輸出。在這種情況下，多邊形物件的原始填充顏色為藍色。但是，FabricJS 預設情況下會將物件標記為髒並重新整理它們在下次渲染時。因此，物件的最終顏色為灰色，並且日誌輸出為 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>Using the isCacheDirty method</h2>
<p>
You can open console from dev tools to see that a true value is returned
</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a polygon object
var polygon = new fabric.Polygon(
[
{ x: 250, y: 180 },
{ x: 150, y: 180 },
{ x: 150, y: 50 },
{ x: 200, y: 10 },
],
{
fill: "blue",
strokeWidth: 3,
stroke: "black",
}
);
// Adding it to the canvas
canvas.add(polygon);
// Applying a different fill colour
polygon.fill = "grey";
// Using isCacheDirty method
console.log("Is cache dirty? : ", polygon.isCacheDirty());
</script>
</body>
</html>
示例 2：將 isCacheDirty 方法與 dirty 屬性一起使用
讓我們來看一個程式碼示例，以檢視將 isCacheDirty 方法與 dirty 屬性結合使用時的日誌輸出。當 dirty 屬性設定為“true”時，它將在下次渲染呼叫中重新渲染物件的快取。由於我們已為 dirty 分配了“false”值，因此不會重新渲染物件的快取，因此 isCacheDirty 方法在控制檯中返回 false 值。
<!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>Using the isCacheDirty method along with the dirty property</h2>
<p>You can open console from dev tools to see that a false value is returned </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a polygon object
var polygon = new fabric.Polygon(
[
{ x: 250, y: 180 },
{ x: 150, y: 180 },
{ x: 150, y: 50 },
{ x: 200, y: 10 },
],
{
fill: "blue",
strokeWidth: 3,
stroke: "black",
dirty: false,
}
);
// Adding it to the canvas
canvas.add(polygon);
// Using isCacheDirty method
console.log("Is cache dirty? : ", polygon.isCacheDirty());
</script>
</body>
</html>
結論
在本教程中，我們使用兩個簡單的示例演示瞭如何使用 FabricJS 檢查多邊形的快取是否髒以及是否需要渲染器。
更新於：2022-12-29
292 次瀏覽
廣告