當耐特

極速渲染抽象派草圖

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

Alpha

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

compositeOperation

注意這里如果自身沒有定義 compositeOperation 會進行向上查找，找到最近的定義了 compositeOperation 的父容器作為自己的 compositeOperation。

Cursor

Fixed

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