在這篇文章中，我們將使用 add 方法將物件新增到畫布。建立畫布後，我們可以使用 FabricJS 中提供的各種物件填充它，例如 fabric.Circle、fabric.Ellipse 或 fabric.Line 等。語法 canvas.add(object: fabric.Object); 引數 Object − 此引數的型別為 fabric.Object，包含我們要新增到畫布的物件。示例 1：在 canvas.add() 內建立物件的例項 無需先建立物件的例項，然後使用 add() 方法將其渲染到畫布上，我們可以在 add() 方法內直接執行此操作。這是一個示例…… 閱讀更多

在這篇文章中，我們將說明如何使用 FabricJS 停用透過拖動選擇物件。在 FabricJS 畫布中，我們基本上可以單擊任意位置並選擇一個區域，該區域中的任何物件都將被選中。在這篇文章中，我們將瞭解如何禁止這種行為。語法 new fabric.Canvas(element: HTMLElement|String, {selection: boolean}: Object) 引數 element − 此引數是元素本身，可以使用 document.getElementById() 或元素本身的 ID 獲取。FabricJS 畫布將在此元素上初始化。 options (可選) − 此引數是一個物件，提供額外的自定義功能…… 閱讀更多

在這篇文章中，我們將瞭解如何使用 containerClass 屬性建立帶有類的畫布。為了訪問原生 HTML canvas 元素，我們可以在其上新增一個包裝器類。此類允許我們控制元素以根據需要新增互動性或樣式。語法 new fabric.Canvas(element: HTMLElement|String, { containerClass: String}: Object) 引數 element − 此引數是元素本身，可以使用 document.getElementById() 或元素本身的 ID 獲取。FabricJS 畫布將在此元素上初始化。 options (可選) − 此引數是一個…… 閱讀更多

在這篇文章中，我們將使用 FabricJS 建立帶有背景影像的畫布。FabricJS 中有兩種方法可以更改畫布的背景影像。第一種方法是使用 Canvas 類本身，並在類的第二個引數中傳遞 backgroundImage。第二種方法是使用 setBackgroundColor 方法。讓我們透過示例瞭解每種方法。方法 1：使用 Canvas 類 在第一種方法中，我們將使用 Canvas 類本身，並在類的第二個引數中傳遞 backgroundImage。語法 new fabric.Canvas(element: HTMLElement|String, {backgroundImage: fabric.Image}: Object) 引數 element … 閱讀更多

在這篇文章中，我們將使用 FabricJS 建立具有給定背景顏色的畫布。FabricJS API 提供的預設背景顏色為白色，可以使用第二個引數自定義。語法 new fabric.Canvas(element: HTMLElement|String, { backgroundColor: String }: Object) 引數 element − 此引數是元素本身，可以使用 document.getElementById() 或元素本身的 ID 獲取。FabricJS 畫布將在此元素上初始化。 Options − 此引數是一個物件，為我們的畫布提供額外的可定製性，backgroundColor 是其中之一，它將幫助我們自定義…… 閱讀更多

在這篇文章中，我們將使用 FabricJS 建立畫布，但在此之前，讓我們瞭解什麼是畫布。為了在網頁上繪製圖形，我們有一個名為 Canvas API 的 Web API。此 API 非常適合繪製基本形狀，但是為其新增互動性或繪製複雜形狀會變得非常困難。因此，FabricJS 出現了，它是一個構建在 Canvas API 之上的庫。要使用 FabricJS，首先需要建立一個 FabricJS 畫布。語法 new fabric.Canvas(element: HTMLElement|String, options: Object) 引數 element − 此引數是…… 閱讀更多