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

當耐特發表於2018-07-30
抽象

skatch

極速渲染抽象派草圖

DEMO

簡介

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

微信交流群【2】

Tencent Wechat

License

MIT

相關文章