微信小程序 Canvas增强组件实例详解及源码分享


Posted in Javascript onJanuary 04, 2017

WeZRender是一个微信小程序Canvas增强组件,基于HTML5 Canvas类库ZRender。

微信小程序 Canvas增强组件实例详解及源码分享

使用

WXML:

<canvas style="width: 375px; height: 600px;" canvas-id="line-canvas-1">canvas>

JS:

var wezrender = require('../../lib/wezrender');

  zr = wezrender.zrender.init("line-canvas-1", 375, 600);

特性

数据驱动

利用WeZRender绘图,只需定义图形数据。

var circle = new wezrender.graphic.shape.Circle(   
    shape: {
      cx: 50,
      cy: 50,
      r: 50
    },
    style: {
      fill: 'red',
      lineWidth: 10
    }
  });

丰富的图形选项

内置多种图形元素(圆形、椭圆、圆环、扇形、矩形、多边形、直线、曲线、心形、水滴、玫瑰线、Trochoid、文字、图片等),统一且丰富的图形属性充分满足个性化需求。

var droplet = new wezrender.graphic.shape.Droplet({
    shape: {
      cx: 200,
      cy: 300,
      width: 50,
      height: 50
    },
    style: {
        fill: '#ff9999'
    }
  });

强大的动画支持

提供promise式的动画接口和常用缓动函数,轻松实现各种动画需求。

var image = new wezrender.graphic.Image({
    style: {
      x: 0,
      y: 0,
      image: '../../images/koala.jpg',
      width: 32,
      height: 24,
      text: 'koala'
    }
  });
  zr.add(image);

  image.animateStyle(true)
    .when(2000, {
      x: 350,
      y: 450,
      width: 360,
      height: 270,
    })
    .start();

易于扩展

分而治之的图形定义策略允许扩展图形元素。

var Pin = wezrender.graphic.Path.extend({
    type: 'pin',
    shape: {
      // x, y on the cusp
      x: 0,
      y: 0,
      width: 0,
      height: 0
    },
    buildPath: function (path, shape) {
      var x = shape.x;
      var y = shape.y;
      var w = shape.width / 5 * 3;
      // Height must be larger than width
      var h = Math.max(w, shape.height);
      var r = w / 2;

      // Dist on y with tangent point and circle center
      var dy = r * r / (h - r);
      var cy = y - h + r + dy;
      var angle = Math.asin(dy / r);
      // Dist on x with tangent point and circle center
      var dx = Math.cos(angle) * r;

      var tanX = Math.sin(angle);
      var tanY = Math.cos(angle);

      path.arc(
        x, cy, r,
        Math.PI - angle,
        Math.PI * 2 + angle
      );

      var cpLen = r * 0.6;
      var cpLen2 = r * 0.7;
      path.bezierCurveTo(
        x + dx - tanX * cpLen, cy + dy + tanY * cpLen,
        x, y - cpLen2,
        x, y
      );
      path.bezierCurveTo(
        x, y - cpLen2,
        x - dx + tanX * cpLen, cy + dy + tanY * cpLen,
        x - dx, cy + dy
      );
      path.closePath();
    }
  });

开源协议

本项目依据MIT开源协议发布,允许任何组织和个人免费使用。

项目地址

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
善用事件代理,警惕闭包的性能陷阱。
Jan 20 Javascript
模拟jQuery中的ready方法及实现按需加载css,js实例代码
Sep 27 Javascript
js实现日期级联效果
Jan 23 Javascript
jQuery中outerWidth()方法用法实例
Jan 19 Javascript
微信小程序中子页面向父页面传值实例详解
Mar 20 Javascript
JavaScript实现省市县三级级联特效
May 16 Javascript
vue-resource调用promise取数据方式详解
Jul 21 Javascript
vue  自定义组件实现通讯录功能
Sep 30 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【矩形情况】
Dec 13 Javascript
JS module的导出和导入的实现代码
Feb 25 Javascript
js实现带有动画的返回顶部
Aug 09 Javascript
绘制微信小程序验证码功能的实例代码
Jan 05 Javascript
AngularJS入门示例之Hello World详解
Jan 04 #Javascript
详解AngularJS验证、过滤器、指令
Jan 04 #Javascript
Bootstrap3 图片(响应式图片&amp;图片形状)
Jan 04 #Javascript
javascript 注释代码的几种方法总结
Jan 04 #Javascript
JS数组返回去重后数据的方法解析
Jan 03 #Javascript
js实现复选框的全选和取消全选效果
Jan 03 #Javascript
使用base64对图片的二进制进行编码并用ajax进行显示
Jan 03 #Javascript
You might like
php数据库备份还原类分享
2014/03/20 PHP
php常用表单验证类用法实例
2015/06/18 PHP
php检查页面是否被百度收录
2015/10/28 PHP
CI配置多数据库访问的方法
2016/03/28 PHP
[原创]后缀就扩展名为js的文件是什么文件
2007/12/06 Javascript
js模拟弹出效果代码修正版
2008/08/07 Javascript
javascript 表格排序和表头浮动效果(扩展SortTable)
2009/04/07 Javascript
JavaScript OOP面向对象介绍
2010/12/02 Javascript
JavaScript中具名函数的多种调用方式总结
2014/11/08 Javascript
jQuery中slideUp()方法用法分析
2014/12/24 Javascript
浅谈JavaScript Date日期和时间对象
2014/12/29 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
2015/06/04 Javascript
Javascript之Math对象详解
2016/06/07 Javascript
微信小程序之拖拽排序(代码分享)
2017/01/21 Javascript
JS正则表达式验证账号、手机号、电话和邮箱是否合法
2017/03/08 Javascript
Node.js v8.0.0正式发布!看看带来了哪些主要新特性
2017/06/02 Javascript
vue表单绑定实现多选框和下拉列表的实例
2017/08/12 Javascript
javascript原型链学习记录之继承实现方式分析
2019/05/01 Javascript
微信小程序实现渐入渐出动画效果
2019/06/13 Javascript
详解使用JWT实现单点登录(完全跨域方案)
2019/08/02 Javascript
小程序实现日历左右滑动效果
2019/10/21 Javascript
python检测是文件还是目录的方法
2015/07/03 Python
Python下Fabric的简单部署方法
2015/07/14 Python
python将字典内容存入mysql实例代码
2018/01/18 Python
Python OpenCV读取png图像转成jpg图像存储的方法
2018/10/28 Python
一篇文章搞懂Python的类与对象名称空间
2018/12/10 Python
庆中秋节主题活动方案
2014/02/03 职场文书
公司承诺书范文
2014/05/19 职场文书
新闻发布会活动策划方案
2014/09/15 职场文书
建筑横幅标语
2014/10/09 职场文书
机关作风建设整改方案
2014/10/27 职场文书
交警失职检讨书
2015/01/26 职场文书
药品销售内勤岗位职责
2015/04/13 职场文书
高三英语教学反思
2016/03/03 职场文书
区域销售大会开幕词
2016/03/04 职场文书
Springboot使用Spring Data JPA实现数据库操作
2021/06/30 Java/Android