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

2018-07-30 10:38 by 【当耐特】, … 阅读, … 评论, 收藏, 编辑

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

版权声明：本文为iamzhanglei原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/iamzhanglei/p/9389303.html