lzyq878手机版
  咨询电话:13607739883

lzyq手机版

【开源】Skatch 正式发布 - 极速渲染抽象派草图

极速渲染抽象派草图

DEMO

SimpleLetter

简介

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.circle280, 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 共拥有如下方法进行草图绘制:

rectcircleellipsepathstrokeRectstrokeCirclestrokeEllipsestrokePathfillRectfillCirclefillEllipsefillPath

可以这么理解: 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