微信小程序 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 相关文章推荐
jquery获得下拉框值的代码
Aug 13 Javascript
创建公共调用 jQuery Ajax 带返回值
Aug 01 Javascript
jQuery 1.8 Release版本发布了
Aug 14 Javascript
类似天猫商品详情随浏览器移动的示例代码
Feb 27 Javascript
JavaScript蒙板(model)功能的简单实现代码
Aug 04 Javascript
Ionic默认的Tabs模板使用实例
Aug 29 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
Oct 11 Javascript
JS仿QQ好友列表展开、收缩功能(第一篇)
Jul 07 Javascript
AngularJs 禁止模板缓存的方法
Nov 28 Javascript
动态加载权限管理模块中的Vue组件
Jan 16 Javascript
用Node写一条配置环境的指令
Nov 14 Javascript
jquery实现拖拽小方块效果
Dec 10 jQuery
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/02/18 PHP
php解析字符串里所有URL地址的方法
2015/04/03 PHP
PHP数字前补0的自带函数sprintf 和number_format的用法(详解)
2017/02/06 PHP
PHP实现的基于单向链表解决约瑟夫环问题示例
2017/09/30 PHP
PHP实现通过文本文件统计页面访问量功能示例
2019/02/13 PHP
[对联广告] JS脚本类
2006/08/27 Javascript
js控制div及网页相关属性的代码
2009/12/19 Javascript
javascript高级学习笔记整理
2011/08/14 Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
2013/11/04 Javascript
js动态修改input输入框的type属性(实现方法解析)
2013/11/13 Javascript
jquery插件开发之实现google+圈子选择功能
2014/03/10 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
2015/09/01 Javascript
jQuery 选择符详细介绍及整理
2016/12/02 Javascript
Vue.js数据绑定之data属性
2017/07/07 Javascript
关于angularJs清除浏览器缓存的方法
2017/11/28 Javascript
js调用设备摄像头的方法
2018/07/19 Javascript
js设计模式之单例模式原理与用法详解
2019/08/15 Javascript
使用vscode快速建立vue模板过程详解
2019/10/10 Javascript
微信小程序中限制激励式视频广告位显示次数(实现思路)
2019/12/06 Javascript
Python中pip安装非PyPI官网第三方库的方法
2015/06/02 Python
Python读取一个目录下所有目录和文件的方法
2016/07/15 Python
Python iter()函数用法实例分析
2018/03/17 Python
详解Django之admin组件的使用和源码剖析
2018/05/04 Python
对Python 窗体(tkinter)文本编辑器(Text)详解
2018/10/11 Python
CSS3 3D立方体效果示例-transform也不过如此
2016/12/05 HTML / CSS
深入研究HTML5实现图片压缩上传功能
2016/03/25 HTML / CSS
成功经营餐厅的创业计划书范文
2013/12/26 职场文书
酒店总经理欢迎词
2014/01/08 职场文书
财务简历的自我评价
2014/03/05 职场文书
环保小标语
2014/06/13 职场文书
单位作风建设剖析材料
2014/10/11 职场文书
2014年司法所工作总结
2014/11/22 职场文书
公司股份转让协议书范本
2015/01/28 职场文书
中秋节寄语2015
2015/03/24 职场文书
Python制作春联的示例代码
2022/01/22 Python
如何利用python创作字符画
2022/06/25 Python