微信小程序 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翻页滚动(示例代码)
Nov 18 Javascript
JavaScript调用客户端的可执行文件(示例代码)
Nov 28 Javascript
动态的创建一个元素createElement及删除一个元素
Jan 24 Javascript
javascript实现带下拉子菜单的导航菜单效果
May 14 Javascript
JavaScript实现非常简单实用的下拉菜单效果
Aug 27 Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
Oct 14 Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
Dec 18 Javascript
在JavaScript中使用JSON数据
Feb 15 Javascript
如何用JavaScript实现动态修改CSS样式表
May 20 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
Dec 13 Javascript
Vue实现双向绑定的原理以及响应式数据的方法
Jul 02 Javascript
vue中控制mock在开发环境使用,在生产环境禁用方式
Apr 06 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中的日期时间处理利器实例(Carbon)
2017/06/09 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
Laravel 5.4因特殊字段太长导致migrations报错的解决
2017/10/22 PHP
PHP实现类似题库抽题效果
2018/08/16 PHP
JavaScript DOM 学习第五章 表单简介
2010/02/19 Javascript
js 弹出菜单/窗口效果
2011/10/30 Javascript
JavaScript异步编程Promise模式的6个特性
2014/04/03 Javascript
jquery datepicker参数介绍和示例
2014/04/15 Javascript
JavaScript中getUTCSeconds()方法的使用详解
2015/06/11 Javascript
简单实现JavaScript图片切换效果
2016/11/28 Javascript
Javascript中call,apply,bind方法的详解与总结
2016/12/12 Javascript
js操作二进制数据方法
2018/03/03 Javascript
vuejs简单验证码功能完整示例
2019/01/08 Javascript
vue下axios拦截器token刷新机制的实例代码
2020/01/17 Javascript
Nuxt默认模板、默认布局和自定义错误页面的实现
2020/05/11 Javascript
解决vue中el-tab-pane切换的问题
2020/07/19 Javascript
python实现一次创建多级目录的方法
2015/05/15 Python
对python中raw_input()和input()的用法详解
2018/04/22 Python
使用GitHub和Python实现持续部署的方法
2019/05/09 Python
python 接口实现 供第三方调用的例子
2019/08/13 Python
keras topN显示,自编写代码案例
2020/07/03 Python
在vscode中启动conda虚拟环境的思路详解
2020/12/25 Python
用Python自动清理电脑内重复文件,只要10行代码(自动脚本)
2021/01/09 Python
玩具反斗城美国官网:Toys"R"Us
2016/09/17 全球购物
德国baby-markt婴儿用品瑞士网站:baby-markt.ch
2017/06/09 全球购物
如何在Cookie里面保存Unicode和国际化字符
2013/05/25 面试题
机械电子工程毕业生自荐信
2013/11/23 职场文书
会计演讲稿范文
2014/05/23 职场文书
公司采购主管岗位职责
2014/06/17 职场文书
2014年应急管理工作总结
2014/11/26 职场文书
励志语录:只有自己足够强大,才能不被别人践踏
2020/01/09 职场文书
CSS3实现模糊背景的三种效果示例
2021/03/30 HTML / CSS
jquery插件实现搜索历史
2021/04/24 jQuery
Python基于Opencv识别两张相似图片
2021/04/25 Python
Logback 使用TurboFilter实现日志级别等内容的动态修改操作
2021/08/30 Java/Android
Python+OpenCV实现图片中的圆形检测
2022/04/07 Python