WeZRender：微信小程序Canvas增强组件。

Ali_ 发布于2019-08-21 11:27 / 3198人阅读

摘要：是一个微信小程序增强组件，基于类库。强大的动画支持提供式的动画接口和常用缓动函数，轻松实现各种动画需求。易于扩展分而治之的图形定义策略允许扩展图形元素。开源协议本项目依据开源协议发布，允许任何组织和个人免费使用。

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...

idc机房托管私有云微信小程序组件微信小程序微信小程序支付微信小程序部署

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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