WeZRender是一个微信小程序Canvas增强组件，基于HTML5 Canvas类库ZRender。
使用
WXML：
JS：
zr = wezrender.zrender.init("line-canvas-1",375,600);
特性
数据驱动
利用WeZRender绘图，只需定义图形数据。
丰富的图形选项
内置多种图形元素（圆形、椭圆、圆环、扇形、矩形、多边形、直线、曲线、心形、水滴、玫瑰线、Trochoid、文字、图片等），统一且丰富的图形属性充分满足个性化需求。
强大的动画支持
提供promise式的动画接口和常用缓动函数，轻松实现各种动画需求。
image.animateStyle(true)
.when(2000,{
x: 350,y: 450,width: 360,height: 270,})
.start();
.when(2000,{
x: 350,y: 450,width: 360,height: 270,})
.start();
易于扩展
分而治之的图形定义策略允许扩展图形元素。
// 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,y
);
path.bezierCurveTo(
x,x - dx + tanX * cpLen,x - dx,cy + dy
);
path.closePath();
}
});
开源协议
本项目依据MIT开源协议发布，允许任何组织和个人免费使用。
项目地址
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
原文链接：https://www.f2er.com/weapp/42910.html