FabricJS – 如何刪除 Line 物件的 URL 字串中的目前物件轉換?

PHPz
發布: 2023-08-27 20:05:09
轉載
798 人瀏覽過

FabricJS – 如何删除 Line 对象的 URL 字符串中的当前对象转换?

在本教程中,我們將學習如何使用 FabricJS 刪除 Line 物件的 URL 字串中的目前物件變換(縮放、角度、翻轉、傾斜)。 Line 元素是 FabricJS 中提供的基本元素之一。它用於創建直線。由於線元素在幾何上是一維的並且不包含內部,因此它們永遠不會被填充。

我們可以透過建立fabric.Line的實例來建立線條對象,指定線條的x和y座標並將其添加到畫布上。為了刪除 Line 物件的 URL 字串中的目前物件變換,我們使用withoutTransform屬性。

文法

toDataURL({ withoutTransform: Boolean }: Object): String
登入後複製

參數

  • 選項(可選) - 此參數是一個物件,它為 Line 物件的 URL 表示形式提供額外的自訂。使用此參數可以變更高度、品質、格式和許多其他屬性,其中withoutTransform是一個屬性。

選項鍵

  • withoutTransform- 該屬性接受一個布林值,它允許我們擺脫目前物件的變換。向其傳遞真值後,最終輸出影像中將不再存在比例、角度、翻轉或傾斜。

使用withoutTransform屬性並向其傳遞一個錯誤值

範例

讓我們來看一個程式碼範例,看看當withoutTransform屬性傳遞一個 false 值時的輸出圖像。一旦我們從開發工具開啟控制台,我們就可以看到 Line 物件的 URL 表示。我們可以複製該 URL 並將其貼上到新分頁的網址列中以查看最終輸出。

在此範例中,我們向 Line 物件傳遞了scaleY 和angle 屬性,分別指定垂直比例因子和角度。因此,我們的輸出將垂直縮放,旋轉角度為 70。但是,由於我們也向withoutTransform屬性傳遞了一個假值,因此我們的最終輸出映像仍將包含scaleY和angle屬性。 < /p>

     
  

Using the withoutTransform property and passing it a false value

You can open the console from dev tools and see the output URL. You can copy that and paste it in the address bar of a new tab to see that the final image contains vertical scaling and has an angle of 70 degrees

登入後複製

使用withoutTransform屬性並向其傳遞一個真值

範例

讓我們看一個程式碼範例,看看當使用withoutTransform屬性並向其傳遞 true 值時,Line 物件的最終輸出圖像是什麼樣子。在這種情況下,我們的最終輸出影像將不包含任何物件變換。

     
  

Using the withoutTransform property and passing it a true value

You can open the console from dev tools and see the output URL. You can copy that and paste it in the address bar of a new tab to see that the final image does not contain vertical scaling or an angle of 70 degrees

登入後複製

以上是FabricJS – 如何刪除 Line 物件的 URL 字串中的目前物件轉換?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:tutorialspoint.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!