极速渲染抽象派草图

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