WeZRender：微信小程序Canvas增强组件。

https://segmentfault.com/a/1190000007982805

WeZRender是一个微信小程序Canvas增强组件，基于HTML5 Canvas类库ZRender。

显示的效果图网址：
https://segmentfault.com/img/bVHEQZ?w=374&h=658

使用

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 cuspx: 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 widthvar h = Math.max(w, shape.height);var r = w / 2;// Dist on y with tangent point and circle centervar 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 centervar 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开源协议发布，允许任何组织和个人免费使用。

项目地址

https://github.com/guyoung/We...

WeZRender：微信小程序Canvas增强组件。相关推荐

微信小程序canvas 绘画组件的使用，画图
微信小程序canvas 绘画组件的使用,画图 canvas 绘画组件文章目录微信小程序canvas 绘画组件的使用,画图闲来没事写个画图的小工具吧,于是就用到了小程序的canvas组件一.先来 ...
【微信小程序canvas】实现小程序手写板用户签名(附代码)
[微信小程序canvas]实现小程序手写板用户签名(附代码) 工作中公司业务需要的微信小程序用户签字功能先看效果图: wxml <view class="wrapper"& ...
微信小程序 canvas type = 2d 绘制海报心得（包括怎么绘制图片和圆角图片和圆角矩形等）
微信小程序 canvas type=2d 使用心得为了方便这里我封装成了一个component 然后说说怎么使用最新的方法(使用方法类似于html中的canvas可以进行参考)获取--canvas ...
微信小程序canvas画布新接口type为2D时drawImage方法的使用以及注意事项
微信小程序canvas画布自2.9.0 起支持一套新 Canvas 2D 接口(需指定 type 属性),但文档不全,从原canvas的api转变到新的api时遇到不少问题,现将新版与旧版的画布载入图 ...
微信小程序Canvas实现手写签名
微信小程序Canvas实现手写签名功能描述点击按钮显示弹窗,弹窗主体为签名板,底部两个按钮为清除和保存. 清除按钮:清空签名板保存按钮:保存签名为图片,并关闭弹窗关键点分析 Canvas实现手 ...
微信小程序 F2 图表组件
@antv/f2-canvas 微信小程序 F2 图表组件安装 npm i @antv/f2-canvas 快速开始下面我们就开始使用 f2-canvas 组件来绘制图表吧,这里假设用户已经初步了 ...
微信小程序-canvas绘制文字实现自动换行
微信小程序-canvas绘制文字实现自动换行在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvasContext.fillText参数为我们只能设置文本的最大宽度,这就产生 ...
微信小程序_基础组件学习02
微信小程序_基础组件学习02 swiper组件 swiper是滑块容器,也就是手机端的轮播图. swiper组件有两部分组成swiper和swiper-item. swiper-item需要放在swi ...
微信小程序基于swiper组件的tab切换
代码地址如下: http://www.demodashi.com/demo/14010.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...

WeZRender：微信小程序Canvas增强组件。

使用

特性

开源协议

项目地址

WeZRender：微信小程序Canvas增强组件。相关推荐

最新文章

热门文章