Skip to content
master
Go to file
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 

readme.md

wxDraw

「已经开始支持图形创建」

轻量的小程序canvas动画库

github

 完整文档看这里

是什么

canvas 是HTML5的一个重要元素,它能够高效的绘制图形,但是过于底层,且粗糙的Api,导致开发者很难使用它来做较为复杂的图形, 而且它的即时绘制无记忆特性,使得它内部的图形并不支持动画更不支持一切交互事件。

这样的问题出现在所有支持canvas的客户端上同样出现在 微信小程序中的canvas中, 由于小程序由jsCore支持,并没有window对象,并且canvas的Api与标准的canvas的Api有所出入,所以市面上绝大部分canvas库与它无缘

而wxDraw也就应运而生,专门用于处理小程序上canvas的图形创建图形动画,以及交互问题的。

特性

  • 简单 不需要你会canvas,会用jQuery就会使用wxDraw。
  • 灵活 所有图形,随时随地都可以进行属性修改、图形添加以及图形销毁。
  • 事件支持 小程序支持的事件只要是合理的都支持。
  • 缓动动画支持 wxDraw支持链式调用动画『就像jQuery的animate一样』,并且支持几乎所有的缓动函数

支持图形

这里只做演示 详细文档 点这里

这些图形都可以在演示文件里看到 点这里

rect

 var rect = new Shape('rect', {x: 60, y: 60, w: 40, h: 40, fillStyle: "#2FB8AC", rotate: Math.PI/2 },'mix', true);

rect

circle

 let circle = new Shape('circle', { x: 100, y: 100, r: 40, sA: Math.PI/4, 
                             fillStyle: "#C0D860",
                            strokeStyle: "#CC333F", rotate: 20, lineWidth: 0, needGra: 'line', 
                              gra: [[0, '#00A0B0'], [0.2, '#6A4A3C'], [0.4, '#CC333F'], [0.6, '#EB6841'], [1, '#EDC951']]}, 
                           'fill', true)

polygon

let polygon = new Shape('polygon', { x: 200, y: 200, r: 40, sides: 9, //9边形
                          fillStyle: "#FC354C", rotate: Math.PI / 4 }, 'mix', true)

ellipse

    let ellipse = new Shape('ellipse', { x: 200, y: 200, a: 40, b: 100, 
                             fillStyle: "#00A0B0", rotate: Math.PI / 7 }, 'mix', true)

image

图形对象

示例

let img = new Shape('image', { x: 100, y: 300,w:100,h:100, file:"./1.png"}, 'fill', true)
  

cshape 「自定义图形」

  let cshape = new Shape('cshape', {
      rotate: Math.PI / 2,
      points: [[70, 85], [40, 20], [24, 46], [2, 4], [14, 6], [4, 46]],
      lineWidth: 5,
      fillStyle: "#00A0B0",
      rotate: Math.PI / 7,
      needGra: 'circle',
      smooth:false,
      gra: [[0, '#00A0B0'], [0.2, '#6A4A3C'], [0.4, '#CC333F'], [0.6, '#EB6841'], [1, '#EDC951']]
    }, 'fill', true)

line

let line = new Shape('line', { points:[[240,373],[11,32],[28,423],[12,105],[203,41],[128,0.06]], 
               strokeStyle: "#2FB8AC",lineWidth:1, rotate: 0, needShadow: true,smooth:false },  
               'fill', true)

text

  let text = new Shape('text', { x: 200, y: 200, text: "我是测试文字", 
                      fillStyle: "#E6781E", rotate: Math.PI / 3}
                      'fill', true)

wxDraw创作的动画演示

这些动画都可以在演示文件里看到 点这里

Google

贪吃蛇

logo演绎

rect舞蹈

吃豆人

wxDraw事件

这些事件都可以在演示文件里看到 点这里

支持

  • tap
  • touchStart
  • touchEnd
  • touchMove
  • longPress
  • drag「自定义的事件」

事件演示

旁边UI小妹妹亲自示范 😜

第一视角

是不是特别简单,特别方便!!! 来,老铁们,star走一波!!!

TODO

  • 图形创建

    • rect
    • arc
      • 扇形
    • polygon
      • 正n边形
      • 用户自己加的形状
      • 光滑版用户自己加的形状
    • image
    • 线条
      • 贝塞尔曲线『用的较少,绘制出来后 没法事件检测』
      • 普通线条
      • 光滑曲线
    • svg path
    • 椭圆
      • 事件
      • 动画
      • 样式
    • 字体
      • 事件
      • 动画
      • 样式
    • 粒子动画元素『我觉得这个算另外一种系统 不属于形状』
  • 样式

    • 阴影
    • 渐变
    • 线宽
    • 线连接
    • 透明度
  • 选中检测

    • rect
    • arc
      • 整个圆形
      • 扇形区域
    • polygon 区域
      • 正多边形
      • 非规则多边形
    • 线条点击
    • 点 点击
    • 椭圆
    • 层级区分
  • 动画

    • requestAnimationFrame垫片
    • 时间扭曲函数
    • 运动
      • 移动
        • x
        • y
      • 放大缩小 使用矩阵暂时搁浅
      • 旋转
        • [x]原点旋转
        • [x]自身中心点旋转
      • 变色
      • 循环动画
      • 连续动画
      • 暂停动画
    • 精灵图『小程序 所支持的drawImage功能太低级 所以取消』
  • 矩阵变换

  • 层级修改

  • 事件

    • touchstart
    • touchmove
    • touchend
    • 拖拽事件
    • tap事件
    • longpress事件
    • 划入划出「划入划出是鼠标的事件吧」
  • 取消事件绑定

  • clone

About

A lightweight canvas library which providing 2d draw for weapp 微信小程序2d动画库 😎 🐼

Topics

Resources

License

Packages

No packages published
You can’t perform that action at this time.