原創：WeZRender：微信小程序Canvas加強組件

時間 2019-11-10

標籤原創 wezrender 微信程序 canvas 加強組件简体版

原文原文鏈接

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

使用

WXML：php

    <canvas style="width: 375px; height: 600px;" canvas-id="line-canvas-1">canvas>

JS：html

    var wezrender = require('../../lib/wezrender');

    zr = wezrender.zrender.init("line-canvas-1", 375, 600);

特性

數據驅動java

利用WeZRender繪圖，只需定義圖形數據。git

    var circle = new wezrender.graphic.shape.Circle(      
        shape: {
            cx: 50,
            cy: 50,
            r: 50
        },
        style: {
            fill: 'red',
            lineWidth: 10
        }
    });

豐富的圖形選項github

內置多種圖形元素（圓形、橢圓、圓環、扇形、矩形、多邊形、直線、曲線、心形、水滴、玫瑰線、Trochoid、文字、圖片等），統一且豐富的圖形屬性充分知足個性化需求。canvas

    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();

易於擴展promise

分而治之的圖形定義策略容許擴展圖形元素。

    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();
        }
    });