首页
登录 | 注册

【开源】Skatch 正式发布

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

    属性名 描述
    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】

    【开源】Skatch 正式发布

    License

    MIT


    相关文章

    • 补习系列(20)-大话 WebSocket 与 "尬聊"的实现
      目录 一.聊聊 WebSocket 二.Stomp 是个什么鬼 三.SpringBoot 整合 WebSocket A. 引入依赖 B. WebSocket 配置 C. 控制器 D. 前端实现 四.参考文档 一.聊聊 WebSocket 从 ...
    • 学了很多乱七杂八的东西,但是依然停留在前端,在工作中一直和后端交流,但是不太了解数据库是怎么回事,为了加强学习,准备学习一些关于数据库相关的东西. 说起数据库可能会有很多很多,SQLServer.Oracle.Sybase等等等,还有就是要 ...
    • 关于分布式锁原理的一些学习与思考-redis分布式锁,zookeeper分布式锁
        首先分布式锁和我们平常讲到的锁原理基本一样,目的就是确保,在多个线程并发时,只有一个线程在同一刻操作这个业务或者说方法.变量. 在一个进程中,也就是一个jvm 或者说应用中,我们很容易去处理控制,在jdk java.util 并发包中已 ...
    • 为什么说 Java 程序员到了必须掌握 Spring Boot 的时候?
      Spring Boot 2.0 的推出又激起了一阵学习 Spring Boot 热,就单从我个人的博客的访问量大幅增加就可以感受到大家对学习 Spring Boot 的热情,那么在这么多人热衷于学习 Spring Boot 之时,我自己也在 ...
    • Spring的历史及哲学
      Spring的历史和哲学 1.Spring 历史 时间回到2002年,当时正是 Java EE 和 EJB 大行其道的时候,很多知名公司都是采用此技术方案进行项目开发.这时候有一个美国的小伙子认为 EJB 太过臃肿,并不是所有的项目都需要使 ...
    • 前言:取得成功的要自律!可能有一腔热血,努力很长一阵子,但过一阵子之后,就不坚持了,所以要自律去约束自己时刻坚持着! 一.收获 8月份的收获还是很大的,主要有以下几个方面: 学会了使用github 注册账号很长时间了,但不怎么会用,这个月, ...

    2020 cecdns.com webmaster#cecdns.com
    12 q. 0.058 s.
    京ICP备10005923号