WeZRender是一个微信小程序Canvas加强组件，基于HTML5 Canvas类库ZRender。git
使用
WXML：github
| <canvas style="width: 375px; height: 600px;" canvas-id="line-canvas-1">canvas> |
|
JS：canvas
| 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、文字、图片等），统一且丰富的图形属性充分知足个性化需求。promise
| 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(); |
|
易于扩展：分而治之的图形定义策略容许扩展图形元素。koa
| 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开源协议发布，容许任何组织和我的无偿使用。
