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

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

WeZRender是一个微信小程序Canvas增强组件，基于HTML5 Canvas类库ZRender。

使用

WXML：

canvas>

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

}

});

丰富的图形选项

内置多种图形元素（圆形、椭圆、圆http://环、扇形、矩形、多边形、直线、曲线、心形、水滴、玫瑰线、Trochoid、文字、图片等），统一且丰富的图形属性充分满足个性化需求。

var droplet = new wezrender.graphic.shape.Droplet({

shape: {

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

项目地址

http://xiazai.jb51.net/201CkpxJNIjQ701/yuanma/WeZRender-master(jb51.net).rar

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。