iT邦幫忙

2024 iThome 鐵人賽

DAY 21
0
Modern Web

一起來玩圖像編輯器:Fabric.js 的實戰修煉系列 第 21

Day21- [相關介紹] 視覺互動向量圖界的運算強者- Paper.js

  • 分享至 

  • xImage
  •  

在查資料的過程中更認識了跟 fabric.js 有點像的 Paper.js 這個酷東西,我們在fabric.js 上休息一下,小小介紹一下他吧~

Paper.js 跟 fabric.js 一樣也是一個開源專案。
是一個向量圖形腳本框架,是專為 HTML5 Canvas 設計的 Js 庫,用於創建和操作複雜的向量圖形

主要特點:

向量圖形:

Paper.js 專注於向量圖形的創建和操作,這使得它特別適合於需要高精度和可縮放性的圖形設計。

可以複雜路徑操作:

  • 路徑布爾運算(聯集、交集、差集等)
  • 複雜曲線處理(貝塞爾曲線、樣條曲線)

從他官網首頁就以展示互動性與向量的控制這件事了
img1

強大的數學庫:

  • 向量和矩陣運算
  • 幾何變換(旋轉、縮放、錯切等)

PaperScript 語言:

  • JavaScript 的超集,專為向量圖形設計
  • 簡化的數學表達式

符號系統 & 高級事件處理:

  • 善於高效處理大量重複對象
  • 可自定義事件
  • 複雜的碰撞檢測

導出功能:

  • 將畫布內容導出為 SVG 或光柵圖像

複雜的動畫系統:

  • 基於向量的動畫
  • 路徑動畫

使用示例:

// 創建一個簡單的圓形
var circle = new Path.Circle({
    center: view.center,
    radius: 50,
    fillColor: 'blue'
});

// 添加鼠標事件
circle.onMouseEnter = function() {
    this.fillColor = 'red';
}

circle.onMouseLeave = function() {
    this.fillColor = 'blue';
}

// 創建動畫
function onFrame(event) {
    circle.scale(Math.sin(event.count / 30) * 0.05 + 1);
}

其實物件導向的方式跟 fabric.js 蠻像的?只是物件的創建命名跟使用 api 的方式有點不同。

paper.js 適用場景:

  1. 數據可視化
  2. 互動式圖形設計工具
  3. 遊戲開發(特別是需要複雜圖形的遊戲)
  4. 藝術創作和生成藝術
  5. 科學模擬和教育軟件

總結

Paper.js 的強項在於處理複雜的向量圖形和路徑操作。它的數學庫和路徑操作功能特別強大,使得創建和操作複雜形狀變得相對容易。
在這方面效能表現優秀。

對於需要精確控制和高度自定義圖形的項目來說,Paper.js 是一個很好的選擇。

並比較它與Fabric.js的異同

設計理念:

  • Paper.js 更偏向於藝術創作和圖形設計
  • Fabric.js 更適合於建立互動式畫布應用

功能重點:

  • Paper.js 在複雜路徑操作和數學計算方面表現優秀
  • Fabric.js 在處理基本形狀、圖片和文本方面更為便捷

學習曲線:

  • Paper.js 有自己的 PaperScript 語言,可能需要額外學習
  • Fabric.js 使用標準 JavaScript,對大多數開發者來說更熟悉

主要還是看你的需求是要做什麼樣的東西?
處理很多飛來飛去的視覺藝術動畫、向量操作 => Paper.js
使用者簡單編輯圖像、畫面與物件的互動等操作性較高的需求 => Fabric.js


上一篇
Day20- 修改畫布 prototype 的入門-拆解 fabric-history prototype (2)
下一篇
Day22-手機雙指觸控畫布也 ok!- Fabric.js 中實現手機畫布多點觸控支持
系列文
一起來玩圖像編輯器:Fabric.js 的實戰修煉30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言