极速渲染抽象派草图

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

【开源】Skatch 正式发布 - 极速渲染抽象派草图的更多相关文章

  1. 开源跨平台的3D渲染软件

    http://www.blender.org/ KVM是Kernel-based Virtual Machine的缩写; http://kiwik.github.io/openstack/2013/1 ...

  2. 使用 Vue 2.0 实现服务端渲染的 HackerNews

    Vue 2.0 支持服务端渲染 (SSR),并且是流式的,可以做组件级的缓存,这使得极速渲染成为可能.同时, 和 2.0 也都能够配合 SSR 提供同构路由和客户端 state hydration.v ...

  3. PixiJS - 基于 WebGL 的超快 HTML5 2D 渲染引擎

    Pixi.js 是一个开源的HTML5 2D 渲染引擎,使用 WebGL 实现,不支持的浏览器会自动降低到 Canvas 实现.PixiJS 的目标是提供一个快速且轻量级的2D库,并能兼容所有设备.此 ...

  4. 最大开源代码sourceforge 简介 及视音频方面常用的开源代码

    所有的音视频凯源代码在这里:http://sourceforge.net/directory/audio-video/os:windows/,你可以下载分析,视频不懂请发邮件给我,帮你分析. 0.视频 ...

  5. [转] java开源游戏

    收藏一下   triplea  Triplea是一个开放源码的boardgame.它允许玩家选择各种各样的战略版图游戏(如:轴心国或同盟军).TripleA引擎支持联网对战,支持声音,支持使用XML文 ...

  6. 解锁Renderbus客户端使用新技巧----快速渲染效果图篇

    度娘说,效果图最基本的要求就是:应该符合事物的本身尺寸,不能为了美观而使用效果把相关模型的尺寸变动,那样的效果图不但不能起到表现设计的作用,反而成为影响设计的一个因素.可见高效渲染效果图是都是当下我们 ...

  7. 杂项:ExtJS

    ylbtech-杂项:ExtJS extjs是一种软件.自动生成行号,支持checkbox全选,动态选择显示哪些列,支持本地以及远程分页,可以对单元格按照自己的想法进行渲染,这些也算可以想到的功能. ...

  8. Axiom3D学习日记 0.Axiom基础知识

    Axiom 3D Engine An open-source, cross-platform, managed 3D rendering engine for DirectX, XNA and Ope ...

  9. CSDN-markdown语法之怎样使用LaTeX语法编写数学公式

    文件夹 文件夹 正文 标记公式 行内公式 块级公式 上标和下标 分数表示 各种括号 根号表示 省略号 矢量表示 间隔空间 希腊字母 特殊字符 关系运算符 集合运算符 对数运算符 三角运算符 微积分运算 ...

随机推荐

  1. aspectj eclipse4.6下载地址

    http://www.eclipse.org/ajdt/downloads/#46zips

  2. C#-多态(十二)

    继承概念 多态:即一个接口,多个功能 同一种操作作用于不同的对象,可以有不同的解释,产生不同的执行结果 多态性可以是静态的或动态的.在静态多态性中,函数的响应是在编译时发生的.在动态多态性中,函数的响 ...

  3. django加密解密api

    分别给出了两个API,一个创造密码,一个验证密码正好满足需求.于是赶紧试试: 首先,引入模块: 1 >>> from django.contrib.auth.hashers impo ...

  4. centos7 Docker私有仓库搭建及删除镜像

    如果不想用私有镜像库,你可以用docker的库 https://hub.docker.com 环境准备 环境:两个装有Docker 17.09.0-ce 的centos7虚拟机 虚拟机一:192.16 ...

  5. Git&GitHub-基础教程

    目录 1. Git简介 1.1 什么是版本控制系统? 1.2. Git的历史 1.3. 什么是分布式?什么是集中式? 2. Git安装 3. 创建一个版本库 4. Git的语法教程 4.1. 提交一个 ...

  6. CSS多行文本垂直居中

    今天需要将文本垂直居中,就是一行是垂直居中,多行也是垂直居中. 效果如下 实现代码(同事提供) <!DOCTYPE html> <html> <head lang=&qu ...

  7. C#基础知识之读取xlsx文件Excel2007

    读取Excel 2007的xlsx文件和读取老的.xls文件是一样的,都是用Oledb读取,仅仅连接字符串不同而已. 具体代码实例: public static DataTable GetExcelT ...

  8. 从 0 → 1,学习Linux该这么开始!

    首先我们还是来普及以下概念,讲点虚的.现在是图形系统的天下,windows我们用了20多年.成功归功与它图形界面,你会点鼠标吗你会敲键盘吗?所以你会上网会聊天会玩游戏了.那么,0基础接触的Linux, ...

  9. L2-012 关于堆的判断 (25 分)

    就是一个最小根堆. 最小根堆的性质,根节点小于等于子树的完全二叉树吧. 构建最小根堆的过程就是一个自下向上的过程. #include<iostream> #include<strin ...

  10. 屏蔽右键+f12

    function disableInfo() { document.onkeydown = function() { var e = window.event || arguments[0]; //屏 ...