微信小程序 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 相关文章推荐
js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
Mar 26 Javascript
使用JQuery和s3captche实现一个水果名字的验证
Aug 14 Javascript
zTree插件之多选下拉菜单实例代码
Nov 06 Javascript
做好七件事帮你提升jQuery的性能
Feb 06 Javascript
javascript结合CSS实现苹果开关按钮特效
Apr 07 Javascript
JavaScript中匿名函数的用法及优缺点详解
Jun 01 Javascript
jQuery Validate插件自定义验证规则的方法
Dec 27 Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
Jul 23 Javascript
微信小程序获取用户信息并保存登录状态详解
May 10 Javascript
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
Jun 28 Javascript
Vue实现图片与文字混输效果
Dec 04 Javascript
react国际化react-intl的使用
May 06 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如何把表单内容提交到数据库
2019/07/08 PHP
utf-8编码引起js输出中文乱码的解决办法
2010/06/23 Javascript
jQuery 表单验证扩展(四)
2010/10/20 Javascript
jQuery的链式调用浅析
2010/12/03 Javascript
js实现键盘上下左右键选择文字并显示在文本框的方法
2015/05/07 Javascript
javascript实现状态栏中文字动态显示的方法
2015/10/20 Javascript
javascript特殊日历控件分享
2016/03/07 Javascript
JS实现支持Ajax验证的表单插件
2016/03/24 Javascript
JS数组去掉重复数据只保留一条的实现代码
2016/08/11 Javascript
原生js实现焦点轮播图效果
2017/01/12 Javascript
input file样式修改以及图片预览删除功能详细概括(推荐)
2017/08/17 Javascript
Node做中转服务器转发接口
2017/10/18 Javascript
实例教学如何写vue插件
2017/11/30 Javascript
详解使用 Node.js 开发简单的脚手架工具
2018/06/08 Javascript
vue系列之requireJs中引入vue-router的方法
2018/07/18 Javascript
js中的闭包实例展示
2018/11/01 Javascript
vue-cli脚手架引入弹出层layer插件的几种方法
2019/06/24 Javascript
react native 仿微信聊天室实例代码
2019/09/17 Javascript
Python 时间处理datetime实例
2008/09/06 Python
Python实现上下班抢个顺风单脚本
2018/02/07 Python
解决python3中的requests解析中文页面出现乱码问题
2019/04/19 Python
python实现扫雷游戏
2020/03/03 Python
pandas apply多线程实现代码
2020/08/17 Python
Python爬虫实例之2021猫眼票房字体加密反爬策略(粗略版)
2021/02/22 Python
Kathmandu澳洲户外商店:新西兰户外运动品牌
2017/11/12 全球购物
一家外企的面试题目(C/C++面试题,C语言面试题)
2014/03/24 面试题
用C或者C++语言实现SOCKET通信
2015/02/24 面试题
以下为Windows NT 下的32 位C++程序,请计算sizeof 的值
2016/12/07 面试题
水务局局长岗位职责
2013/11/28 职场文书
记者岗位职责
2014/01/06 职场文书
幼儿园教师辞职信
2014/01/18 职场文书
早会主持词
2014/03/17 职场文书
促销活动计划书
2014/05/02 职场文书
五四青年节优秀演讲稿范文
2014/05/28 职场文书
青春飞扬演讲稿
2014/09/11 职场文书
店铺转让协议书(2014版)
2014/09/23 职场文书