微信小程序 Canvas增强组件实例详解及源码分享

前端之家收集整理的这篇文章主要介绍了微信小程序 Canvas增强组件实例详解及源码分享前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

易于扩展

分而治之的图形定义策略允许扩展图形元素。

// 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开源协议发布,允许任何组织和个人免费使用。

项目地址

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持

猜你在找的微信小程序相关文章