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開源協議發佈，容許任何組織和我的無償使用。
