開源：WeZRender - 微信小程序Canvas增強組件

WeZRender：微信小程序Canvas增強組件

WeZRender是一個微信小程序Canvas增強組件，基于HTML5 Canvas類庫ZRender。

使用

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);</code></pre> 

特性
 
  
數據驅動
 
  
利用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();</code></pre> 

易于擴展
 
  
分而治之的圖形定義策略允許擴展圖形元素。
 
  
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();
        }
    });