微信小程序 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中打印当前的时间实现思路及代码
Dec 18 Javascript
jquery中$each()方法的使用指南
Apr 30 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
Jul 17 Javascript
javascript宿主对象之window.navigator详解
Sep 07 Javascript
jquery判断类型是不是number类型的实例代码
Oct 07 Javascript
javascript实现鼠标点击页面 移动DIV
Dec 02 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
Mar 21 Javascript
解决vue 单文件组件中样式加载问题
Apr 24 Javascript
Angular封装表单控件及思想总结
Dec 11 Javascript
浅析JS中NEW的实现原理及重写
Feb 20 Javascript
vue 在单页面应用里使用二级套嵌路由
Dec 19 Vue.js
vue+element UI实现树形表格
Dec 29 Vue.js
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的substr_replace将指定两位置之间的字符替换为*号
2011/05/04 PHP
PHP对象转换为数组函数(递归方法)
2012/02/04 PHP
浅析php学习的路线图
2013/07/10 PHP
PHP在网页中动态生成PDF文件详细教程
2014/07/05 PHP
php实现高效获取图片尺寸的方法
2014/12/12 PHP
PHP缓存集成库phpFastCache用法
2014/12/15 PHP
CI框架的安全性分析
2016/05/18 PHP
在你的网页中嵌入外部网页的方法
2007/04/02 Javascript
JavaScript 事件系统
2010/07/22 Javascript
JavaScript中json使用自己总结
2013/08/13 Javascript
javascript实现10个球随机运动、碰撞实例详解
2015/07/08 Javascript
JS实现的通用表单验证插件完整实例
2015/08/20 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
2016/12/08 Javascript
js实现表格筛选功能
2017/01/18 Javascript
详解AngularJS中$filter过滤器使用(自定义过滤器)
2017/02/04 Javascript
jquery实现焦点轮播效果
2017/02/23 Javascript
js数字计算 误差问题的快速解决方法
2017/02/28 Javascript
小程序rich-text组件如何改变内部img图片样式的方法
2019/05/22 Javascript
详解利用nodejs对本地json文件进行增删改查
2019/09/20 NodeJs
[49:20]2014 DOTA2国际邀请赛中国区预选赛5.21 CIS VS TongFu
2014/05/22 DOTA
[05:59]带你看看DPC的台前幕后
2021/03/11 DOTA
用python实现批量重命名文件的代码
2012/05/25 Python
python实现数通设备tftp备份配置文件示例
2014/04/02 Python
Python实现的FTP通信客户端与服务器端功能示例
2018/03/28 Python
解决PyCharm的Python.exe已经停止工作的问题
2018/11/29 Python
详解Python安装tesserocr遇到的各种问题及解决办法
2019/03/07 Python
Numpy 中的矩阵求逆实例
2019/08/26 Python
Django获取model中的字段名和字段的verbose_name方式
2020/05/19 Python
Python同时迭代多个序列的方法
2020/07/28 Python
HTML5中实现拖放效果无须借助javascript
2012/12/26 HTML / CSS
EVE LOM英国官网:全世界最好的洁面膏
2017/10/30 全球购物
当我正在为表建立索引的时候,SQL Server 会禁止对表的访问吗
2014/04/28 面试题
2014迎国庆标语大全
2014/09/19 职场文书
考研英语辞职信
2015/05/13 职场文书
赵氏孤儿观后感
2015/06/09 职场文书
2015年国培研修感言
2015/08/01 职场文书