摘要:WeZRender是一个微信小程序Canvas增强组件，基于HTML5Canvas类库ZRender
WeZRender是一个
微信小程序Canvas增强组件，基于HTML5Canvas类库ZRender。
使用
WXML：
| <canvasstyle="width:375px;height:600px;"canvas-id="line-canvas-1">canvas> |
|
JS：
| varwezrender=require('../../lib/wezrender'); | | | zr=wezrender.zrender.init("line-canvas-1",375,600); |
|
特性
数据驱动：利用WeZRender绘图，只需定义图形数据。
| varcircle=newwezrender.graphic.shape.Circle( | | shape:{ | | cx:50, | | cy:50, | | r:50 | | }, | | style:{ | | fill:'red', | | lineWidth:10 | | } | | }); |
|
丰富的图形选项
内置多种图形元素（圆形、椭圆、圆环、扇形、矩形、多边形、直线、曲线、心形、水滴、玫瑰线、Trochoid、文字、图片等），统一且丰富的图形属性充分满足个性化需求。
| vardroplet=newwezrender.graphic.shape.Droplet({ | | shape:{ | | cx:200, | | cy:300, | | width:50, | | height:50 | | }, | | style:{ | | fill:'#ff9999' | | } | | }); |
|
强大的动画支持：提供promise式的动画接口和常用缓动函数，轻松实现各种动画需求。
| varimage=newwezrender.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(); |
|
易于扩展：分而治之的图形定义策略允许扩展图形元素。
| varPin=wezrender.graphic.Path.extend({ | | type:'pin', | | shape:{//x,yonthecusp | | x:0, | | y:0, | | width:0, | | height:0 | | }, | | buildPath:function(path,shape){varx=shape.x;vary=shape.y;varw=shape.width/5*3;//Heightmustbelargerthanwidth | | varh=Math.max(w,shape.height);varr=w/2;//Distonywithtangentpointandcirclecenter | | vardy=r*r/(h-r);varcy=y-h+r+dy;varangle=Math.asin(dy/r);//Distonxwithtangentpointandcirclecenter | | vardx=Math.cos(angle)*r;vartanX=Math.sin(angle);vartanY=Math.cos(angle); | | | path.arc( | | x,cy,r,Math.PI-angle,Math.PI*2+angle | | );varcpLen=r*0.6;varcpLen2=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(); | | } | });
项目地址https://github.com/guyoung/WeZRender
|
|
开源协议
本项目依据MIT开源协议发布，允许任何组织和个人免费使用。
