微信小程序 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实现读取txt文档的脚本
Jul 20 Javascript
js checkbox(复选框) 使用集锦
Apr 28 Javascript
用jquery与css打造个性化的单选框和复选框
Oct 20 Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
Apr 10 Javascript
js+div实现文字滚动和图片切换效果代码
Aug 27 Javascript
js实现带农历和八字等信息的日历特效
May 16 Javascript
全面解析JavaScript中的valueOf与toString方法(推荐)
Jun 14 Javascript
JavaScript中的子窗口与父窗口的互相调用问题
Feb 08 Javascript
基于JavaScript实现淘宝商品广告效果
Aug 10 Javascript
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 jQuery
详解Vue中watch的详细用法
Nov 28 Javascript
vant自定义二级菜单操作
Nov 02 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
jQuery 源码分析笔记
2011/05/25 PHP
深入PHP nl2br()格式化输出的详解
2013/06/05 PHP
深入解析PHP垃圾回收机制对内存泄露的处理
2013/06/14 PHP
PHP中mysql_field_type()函数用法
2014/11/24 PHP
才发现的超链接js导致网页中GIF动画停止的解决方法
2007/11/02 Javascript
DOM_window对象属性之--clipboardData对象操作代码
2011/02/03 Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
2013/04/16 Javascript
计算新浪Weibo消息长度(还可以输入119字)
2013/07/02 Javascript
JS获取URL中的参数数据
2013/12/05 Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
2015/03/30 Javascript
JavaScript数值千分位格式化的两种简单实现方法
2016/08/01 Javascript
JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序
2017/01/25 Javascript
Javascript基础回顾之(二) js作用域
2017/01/31 Javascript
解决vue.js在编写过程中出现空格不规范报错的问题
2017/09/20 Javascript
js通过Date对象实现倒计时动画效果
2017/10/27 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
2018/07/09 Javascript
小程序点击图片实现自动播放视频
2020/05/29 Javascript
一些你可能不熟悉的JS知识点总结
2019/03/15 Javascript
js实现mp3录音通过websocket实时传送+简易波形图效果
2020/06/12 Javascript
v-slot和slot、slot-scope之间相互替换实例
2020/09/04 Javascript
[01:11:27]2018DOTA2亚洲邀请赛小组赛 A组加赛 Newbee vs Optic
2018/04/03 DOTA
Python实现处理管道的方法
2015/06/04 Python
在Python的Django框架中更新数据库数据的方法
2015/07/17 Python
一步步教你用python的scrapy编写一个爬虫
2019/04/17 Python
Python实现非正太分布的异常值检测方式
2019/12/09 Python
python 实现将Numpy数组保存为图像
2020/01/09 Python
python实现飞船游戏的纵向移动
2020/04/24 Python
基于Python实现视频的人脸融合功能
2020/06/12 Python
Unineed旗下时尚轻奢网站:FABHunt
2019/05/13 全球购物
汽车电子与维修专业大学生求职信
2013/09/28 职场文书
工程预算与管理应届生求职信
2013/10/06 职场文书
幼儿园保教管理制度
2014/02/03 职场文书
境外导游求职信
2014/02/27 职场文书
2019各种承诺书范文
2019/06/24 职场文书
Redis特殊数据类型Geospatial地理空间
2022/06/01 Redis
CSS的calc函数用法小结
2022/06/25 HTML / CSS