極速渲染抽象派草圖
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】
License
MIT