WeZRender是一個微信小程序Canvas增強組件,基於HTML5 Canvas類庫ZRender。
使用
WXML:
<canvas style="width: 375px; height: 600px;" canvas-id="line-canvas-1">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
}
});
豐富的圖形選項
內置多種圖形元素(圓形、橢圓、圓環、扇形、矩形、多邊形、直線、曲線、心形、水滴、玫瑰線、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: 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;
var h = Math.max(w, shape.height);
var r = w / 2;
var dy = r * r / (h - r);
var cy = y - h + r + dy;
var angle = Math.asin(dy / r);
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開源協議發佈,允許任何組織和個人免費使用。
項目地址