【開源】Skatch 正式發佈 - 極速渲染抽象派草圖

極速渲染抽象派草圖

DEMO

• Simple
• Letter

簡介

Skatch 這個詞由 sketch wechart abstract cax 混合而成的一個新詞，表明了cax wechart 抽象藝術派派草圖渲染器。說得直白一點就是npm 上 sketch 被 tj 佔了，只能強行加上賦予某些意義合成 skatch 這個詞。關於個人合成詞的相關庫最滿意的非 pasition (path transition) 莫屬了。

使用

const skatch = new Skatch({
  randomRange: 10,      //點的抖動範圍
  
  strokeRepeat: 12,   //重複繪製的次數
  strokeWidth: 1,      //繪製線寬
  strokeStyle: 'black',//繪製顏色

  gap: 5, //填充線的間距
  fillAngle: -45,//填充線的角度
  curveRange: 45, //填充線扭曲範圍
  fillWidth: 1, //填充線的線寬
  fillRepeat: 2,//填充線重複填充的次數
  fillStyle: '#6aa8df',//填充線的顏色

  filter: 1 //繪製 path 的時候過濾的比例，範圍是 (0-1)
})

skatch.circle(310, 280, 50)
stage.add(skatch)
stage.update()
複製代碼

因爲 skatch 是 cax 自定義 Element(繼承自 cax.Group)，因此擁有設置全部屬性的能力,以下所示:

Transform

屬性名	描述
x	水平偏移
y	豎直偏移
scaleX	水平縮放
scaleY	豎直縮放
rotation	旋轉
skewX	歪斜 X
skewY	歪斜 Y
originX	旋轉基點 X
originY	旋轉基點 Y

Alpha

屬性名	描述
alpha	元素的透明度

注意這裏父子都設置了 alpha 會進行乘法疊加。

compositeOperation

屬性名	描述
compositeOperation	源圖像繪製到目標圖像上的疊加模式

注意這裏若是自身沒有定義 compositeOperation 會進行向上查找，找到最近的定義了 compositeOperation 的父容器做爲本身的 compositeOperation。

Cursor

屬性名	描述
cursor	鼠標移上去的形狀

Fixed

屬性名	描述
fixed	是否固定定位，默認是 false 設置成 true 不會疊加祖輩們的 transform 屬性

Shadow

屬性名	描述
shadow	陰影

使用方式:

obj.shadow = {
    color: '#42B035',
    offsetX: -5,
    offsetY: 5,
    blur: 10
}
複製代碼

skatch 共擁有以下方法進行草圖繪製:

• rect
• circle
• ellipse
• path
• strokeRect
• strokeCircle
• strokeEllipse
• strokePath
• fillRect
• fillCircle
• fillEllipse
• fillPath

能夠這麼理解: rect === strokeRect + fillRect 。其餘的形狀以此類推。

與 rough 的異同

Rough 是很是著名的草圖渲染庫，看上去 skatch 和 rough 很是相似，可是有着本質的不一樣。

• Rough 使用純數學進行繪製前的計算（好比計算線段與線段、線段與圓、線段與橢圓交點等）
• Skatch 使用 簡單計算 + clip + 圖層合成 + 座標 shake

看上去 skatch 過程複雜？因此速度更慢？大錯特錯！Skatch clip 和 圖層的行爲都是純圖像處理，在 GPU 中完成，有硬件加速，小部分任務在 CPU 中完成。 也能夠這樣理解 rough 主要計算放在 CPU，skatch主要計算放在了 GPU。Skatch 具體的原理等待個人教程。

Star & Follow

• skatch
• @dntzhang

微信交流羣【2】

License

MIT