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

Ali_ 發布于2019-08-21 11:27 / 3329人閱讀

摘要：是一個微信小程序增強組件，基于類庫。強大的動畫支持提供式的動畫接口和常用緩動函數，輕松實現各種動畫需求。易于擴展分而治之的圖形定義策略允許擴展圖形元素。開源協議本項目依據開源協議發布，允許任何組織和個人免費使用。

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

使用

WXML：

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 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開源協議發布，允許任何組織和個人免費使用。

項目地址

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

云服務器 GPU云服務器微信小程序組件微信小程序微信小程序支付微信小程序部署

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86733.html

擴展微信小程序框架功能

摘要：擴展微信小程序框架功能是狀態容器，提供可預測化的狀態管理。擴展微信小程序框架功能日期時間是一個的日期時間處理工具類，其對于的日期時間處理功能非常強悍和全面。通過第三方 JavaScript 庫，擴展微信小程序框架功能。擴展微信小程序框架功能（1）——Promise ES6 對 Promise 有了原生的支持，但微信開發者工具更新版本（0.11.112200）后, 移除了開發者工具...

marek 2019-08-20 13:36 評論0 收藏0
使用ES6新特性開發微信小程序

摘要：使用新特性開發微信小程序國際化與本地化新特性國際化與本地化新增了很多對于國際化的支持，比如時間格式，貨幣格式，數字格式等。 ECMAScript 6（簡稱ES6）是JavaScript語言的最新標準。因為當前版本的ES6是在2015年發布的，所以又稱ECMAScript 2015。微信小程序支持絕大部分ES6的新增特性。使用ES6新特性開發微信小程序（1） ES6新特性：Cons...

Backache 2019-08-21 11:26 評論0 收藏0
微信小程序資源匯總

awesome-github-wechat-weapp 是由OpenDigg整理并維護的微信小程序開源項目庫集合。我們會定期同步上的項目到這里，也歡迎各位 UI組件開發框架實用庫開發工具服務端項目實例Demo UI組件 weui-wxss ★1873 - 同微信原生視覺體驗一致的基礎樣式庫zanui-weapp ★794 - 好用易擴展的小程序 UI 庫wx-charts ★449 - 微信小程...

Olivia 2019-08-21 17:48 評論0 收藏0
使用TypeScript開發微信小程序

摘要：使用開發微信小程序基礎接口核心設計原則之一就是類型檢查，通過使用接口可以進行類型檢查，滿足傳統面向對象思想，利于有效開發，有效避免類型轉換問題。使用開發微信小程序基礎迭代器為每一個對象定義了默認的迭代器。使用TypeScript開發微信小程序（1）——基礎：數據類型（Type） ?TypeScript 的基本數據類型有boolean、number、string 、array、enum...

xingpingz 2019-08-20 13:52 評論0 收藏0
前端開源項目周報0109

摘要：由出品的前端開源項目周報第五期來啦。我們的前端開源周報集合了一周來新收錄的優質的前端開發方面的開源項目，方便前端開發人員便捷的找到自己需要的項目工具等。由OpenDigg?出品的前端開源項目周報第五期來啦。我們的前端開源周報集合了OpenDigg一周來新收錄的優質的前端開發方面的開源項目，方便前端開發人員便捷的找到自己需要的項目工具等。 bttn.css 獨一無二的按鈕 showIm...

Tikitoo 2019-08-30 13:20 評論0 收藏0