微信小程序 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 相关文章推荐
javascript 二维数组的实现与应用
Mar 16 Javascript
用jquery模仿的a的title属性(兼容ie6/7)
Jan 21 Javascript
js模仿jquery的写法示例代码
Jun 16 Javascript
jQuery源码分析之jQuery中的循环技巧详解
Sep 06 Javascript
javascript实现日期时间动态显示示例代码
Sep 08 Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
Oct 16 Javascript
jQuery内存泄露解决办法
Dec 13 Javascript
node-sass安装失败的原因与解决方法
Sep 04 Javascript
JS获取字符对应的ASCII码实例
Sep 10 Javascript
删除table表格行的实例讲解
Sep 21 Javascript
详解React之父子组件传递和其它一些要点
Jun 25 Javascript
不得不知的ES6小技巧
Jul 28 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
大师制作的中短波矿石收音机
2020/04/02 无线电
php实现保存周期为1天的购物车类
2017/07/07 PHP
在 Laravel 中动态隐藏 API 字段的方法
2019/10/25 PHP
laravel 框架结合关联查询 when()用法分析
2019/11/22 PHP
关于跨站脚本攻击问题
2011/12/22 Javascript
Javascript闭包用法实例分析
2015/01/23 Javascript
JavaScript检测字符串中是否含有html标签实现方法
2015/07/01 Javascript
详解javascript高级定时器
2015/12/31 Javascript
基于jquery实现ajax无刷新评论
2020/08/19 Javascript
jQuery获取radio选中项的值实例
2016/06/18 Javascript
JS实现页面内跳转的简单代码
2017/09/03 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
2019/01/29 Javascript
详解vue-element Tree树形控件填坑路
2019/03/26 Javascript
vue使用map代替Aarry数组循环遍历的方法
2020/04/30 Javascript
Element Tooltip 文字提示的使用示例
2020/07/26 Javascript
在Heroku云平台上部署Python的Django框架的教程
2015/04/20 Python
python中sys.argv函数精简概括
2018/07/08 Python
解决Python正则表达式匹配反斜杠''\''问题
2019/07/17 Python
在pycharm中显示python画的图方法
2019/08/31 Python
pycharm 关掉syntax检查操作
2020/06/09 Python
python基于opencv实现人脸识别
2021/01/04 Python
CSS3+DIV实现漂亮的动画彩色标签
2016/06/16 HTML / CSS
雅诗兰黛旗下走天然植物路线的彩妆品牌:Prescriptives
2016/08/14 全球购物
Luxplus瑞典:香水和美容护理折扣
2018/01/28 全球购物
Kathmandu美国网站:新西兰户外运动品牌
2019/03/23 全球购物
King Apparel官网:英国街头服饰品牌
2019/09/05 全球购物
教师求职信范文分享
2013/12/27 职场文书
幼儿园家长会欢迎词
2014/01/09 职场文书
篮球社团活动总结
2014/06/27 职场文书
鸟的天堂导游词
2015/01/31 职场文书
会议主持词结束语
2015/07/03 职场文书
感恩的心主题班会
2015/08/12 职场文书
导游词之西江千户苗寨
2019/12/24 职场文书
Filebeat 采集 Nginx 日志的方法
2021/03/31 Servers
国产动画《万圣街》日语配音版制作决定!
2022/03/20 国漫
Java十分钟精通进阶适配器模式
2022/04/06 Java/Android