代码拉取完成,页面将自动刷新
一款轻量且强大的 Canvas(&SVG) 渲染引擎,从 ZRender 改进而来。
主页:https://quark-renderer.gitee.io
重要:Quark Renderer 不是从零开始构建的,它是从 ZRender 魔改而来,ZRender 是 ECharts 底层的渲染引擎。
我已经使用 ECharts 和 ZRender 很多年,在图形化领域,这两款工具都极其强大。
为了更好地理解 ZRender 底层的设计思想,最近我花了一些时间通读了它的源代码(2020-01)。在这个过程中,重构了大量的代码和注释,因为:
与 ZRender 原始的实现相比,我的这个版本重点提升了这些特性:
浏览器环境中的用法:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Animation</title>
<script src="../dist/quark-renderer.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
html,
body,
#main {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="main"></div>
<script type="text/javascript">
let main = document.getElementById('main');
let qr = QuarkRenderer.init(main);
let gradient = new QuarkRenderer.LinearGradient();
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'black');
let circle = new QuarkRenderer.Circle({
position: [0, 0],
scale: [1, 1],
shape: {
cx: 50,
cy: 50,
r: 50,
},
style: {
fill: gradient,
lineWidth: 5,
text: 'circle',
textPosition: 'inside',
},
});
qr.add(circle);
// first animation process
circle
.animate()
.when(1000, {
position: [200, 0],
scale: [2, 1],
})
.when(2000, {
position: [200, 200],
scale: [1, 1],
})
.when(3000, {
position: [0, 200],
scale: [1, 2],
})
.when(4000, {
position: [0, 0],
scale: [1, 1],
})
.during(function () {
console.log(circle.animationProcessList.length);
})
.done(function () {
console.log(circle.animationProcessList.length);
})
.start(); //.start(true)
//second animation process
circle
.animate()
.when(1000, {
position: [500, 0],
scale: [2, 1],
})
.when(2000, {
position: [200, 200],
scale: [1, 1],
})
.when(3000, {
position: [0, 200],
scale: [1, 2],
})
.when(4000, {
position: [0, 0],
scale: [1, 1],
})
.during(function () {
console.log(circle.animationProcessList.length);
})
.done(function () {
console.log(circle.animationProcessList.length);
})
.start(); //.start(true)
</script>
</body>
</html>
微信小程序中的用法:
<view class="page">
<view class="page__hd">
<view class="page__title">Quark Renderer 小程序示例1</view>
</view>
<view class="page__bd page__bd_spacing">
<view style="width:100%;height:500px;">
<canvas style="width: 300px; height: 500px;" canvas-id="firstCanvas"></canvas>
</view>
</view>
</view>
onReady: function () {
let ctx = wx.createCanvasContext('firstCanvas');
//注意这里的初始化参数,因为微信小程序不允许操作 DOM,所以引擎不能自动获取到宽度高度,这里需要手动传进去
let qr = QuarkRenderer.init(ctx,{width:300,height:500,renderer:'canvas'});
let polygon = new QuarkRenderer.Polygon({
position: [100, 100],
scale: [1, 1],
style: {
fill: 'red'
}
});
setInterval(function () {
let len = Math.round(Math.random() * 100);
let points = [];
let r = (Math.random() * 100);
for (let i = 0; i <= len; i++) {
let phi = i / len * Math.PI * 2;
let x = Math.cos(phi) * r + 100;
let y = Math.sin(phi) * r + 100;
points.push([x, y]);
}
polygon.animateTo({
shape: {
points: points
}
}, 500, 'cubicOut');
}, 1000);
qr.add(polygon);
}
API 文档位于 /api 目录下,在你的浏览器中打开 /api/index.html 就可以看到很漂亮的 API 文档了,风格与 Sencha(ExtJS) 相同。
微信小程序示例:
https://cloud.tencent.com/edu/learning/live-1902?ADTAG=xyj
BSD 3-Clause License
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型