lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-10-15 12:34:52 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

performance optimizations

Browse Source
This commit is contained in:
Anton Lavrenov
2020-06-10 11:57:48 -05:00
parent 43b23e9559
commit 1d8388eead
12 changed files with 184 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
test/performance/bunnies.html
View File

@@ -10,7 +10,8 @@
</head>
<body>
<div id="container"></div>
<script src="../../konva.js"></script>
<script src="../../konva.min.js"></script>
<!-- <script src="https://unpkg.com/konva@6.0.0/konva.min.js"></script> -->
<script src="http://www.html5canvastutorials.com/lib/stats/stats.js"></script>
<script defer="defer">
var lastTime = 0;
@@ -28,7 +29,7 @@
var maxY = height - 10;
var minY = 0;
var startBunnyCount = 2000;
var startBunnyCount = 4000;
var isAdding = false;
var count = 0;
var container;
@@ -37,6 +38,8 @@
var amount = 10;
var counter;
Konva.pixelRatio = 1;
var stage = new Konva.Stage({
container: 'container',
width: width - 10,
@@ -132,27 +135,35 @@
for (var i = 0; i < bunnys.length; i++) {
var bunny = bunnys[i];
bunny.setX(bunny.getX() + bunny.speedX);
bunny.setY(bunny.getY() + bunny.speedY);
var pos = {
x: bunny.x(),
y: bunny.y(),
};
pos.x = pos.x + bunny.speedX;
pos.y = pos.y + bunny.speedY;
bunny.speedY += gravity;
if (bunny.getX() > maxX - wabbitTexture.width) {
if (pos.x > maxX - wabbitTexture.width) {
bunny.speedX *= -1;
bunny.setX(maxX - wabbitTexture.width);
} else if (bunny.getX() < minX) {
pos.x = maxX - wabbitTexture.width;
} else if (pos.x < minX) {
bunny.speedX *= -1;
bunny.setX(minX);
pos.x = minX;
}
if (bunny.getY() > maxY - wabbitTexture.height) {
if (pos.y > maxY - wabbitTexture.height) {
bunny.speedY *= -0.85;
bunny.setY(maxY - wabbitTexture.height);
pos.y = maxY - wabbitTexture.height;
if (Math.random() > 0.5) {
bunny.speedY -= Math.random() * 6;
}
} else if (bunny.getY() < minY) {
} else if (pos.y < minY) {
bunny.speedY = 0;
bunny.setY(minY);
pos.y = minY;
}
bunny.position({
x: pos.x,
y: pos.y,
});
}
layer.draw();
requestAnimationFrame(update);