lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-06-28 09:48:30 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

add docs, change perf test

Browse Source
This commit is contained in:
Anton Lavrenov 2019-01-24 08:45:17 -05:00
parent a81f9ec1f9
commit d726c5d6f3
4 changed files with 135 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
konva.js
View File

@ -11412,6 +11412,7 @@
Text.prototype.getTextWidth = function () { Text.prototype.getTextWidth = function () {
return this.textWidth; return this.textWidth;
}; };
// TODO: deprecate and remove the method
/** /**
* get height of one line of text * get height of one line of text
* @method * @method
@ -11421,6 +11422,7 @@
Text.prototype.getTextHeight = function () { Text.prototype.getTextHeight = function () {
return this.textHeight; return this.textHeight;
}; };
// TODO: make it public?
Text.prototype._getTextSize = function (text) { Text.prototype._getTextSize = function (text) {
var _context = getDummyContext(), fontSize = this.fontSize(), metrics; var _context = getDummyContext(), fontSize = this.fontSize(), metrics;
_context.save(); _context.save();

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "konva", "name": "konva",
"version": "3.0.0", "version": "2.6.0",
"author": "Anton Lavrenov", "author": "Anton Lavrenov",
"files": [ "files": [
"README.md", "README.md",

3
src/shapes/Text.ts
View File

@ -275,6 +275,7 @@ export class Text extends Shape {
getTextWidth() { getTextWidth() {
return this.textWidth; return this.textWidth;
} }
// TODO: deprecate and remove the method
/** /**
* get height of one line of text * get height of one line of text
* @method * @method
@ -284,6 +285,8 @@ export class Text extends Shape {
getTextHeight() { getTextHeight() {
return this.textHeight; return this.textHeight;
} }
// TODO: make it public?
_getTextSize(text) { _getTextSize(text) {
var _context = getDummyContext(), var _context = getDummyContext(),
fontSize = this.fontSize(), fontSize = this.fontSize(),

279
test/performance/bunnies.html
View File

@ -1,4 +1,4 @@
<!DOCTYPE HTML> <!DOCTYPE html>
<html> <html>
<head> <head>
<style> <style>
@ -6,29 +6,28 @@
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
} }
</style> </style>
</head> </head>
<body> <body>
<div id='container'></div> <div id="container"></div>
<script src='../../dist/konva-dev.js'></script> <script src="../../konva.js"></script>
<script src='http://www.html5canvastutorials.com/lib/stats/stats.js'></script> <script src="http://www.html5canvastutorials.com/lib/stats/stats.js"></script>
<script defer='defer'> <script defer="defer">
var lastTime = 0; var lastTime = 0;
var width = window.innerWidth; var width = window.innerWidth;
var height = window.innerHeight; var height = window.innerHeight;
var wabbitTexture; var wabbitTexture;
var bunnys = []; var bunnys = [];
var gravity = 0.75; var gravity = 0.75;
var maxX = width - 10; var maxX = width - 10;
var minX = 0; var minX = 0;
var maxY = height - 10; var maxY = height - 10;
var minY = 0; var minY = 0;
var startBunnyCount = 10; var startBunnyCount = 10;
var isAdding = false; var isAdding = false;
var count = 0; var count = 0;
@ -37,150 +36,130 @@
var stats; var stats;
var amount = 10; var amount = 10;
var counter; var counter;
var stage = new Konva.Stage({
container: 'container',
width: width - 10,
height: height - 10,
});
layer = new Konva.FastLayer();
stage.add(layer);
stats = new Stats();
wabbitTexture = new Image();
wabbitTexture.onload = function() {
_handleTextureLoaded();
};
wabbitTexture.src = '../assets/bunny.png';
document.body.appendChild( stats.domElement );
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
window.requestAnimationFrame(update);
counter = document.createElement('div');
counter.className = 'counter';
counter.style.position = 'absolute';
counter.style.top = '50px';
document.body.appendChild(counter); var stage = new Konva.Stage({
container: 'container',
count = startBunnyCount; width: width - 10,
counter.innerHTML = startBunnyCount + ' BUNNIES'; height: height - 10
});
container = stage; layer = new Konva.FastLayer();
// stage.addChild(container); stage.add(layer);
stats = new Stats();
stage.on('mousedown', function() {
isAdding = true; wabbitTexture = new Image();
wabbitTexture.onload = function() {
_handleTextureLoaded();
};
wabbitTexture.src = '../assets/bunny.png';
document.body.appendChild(stats.domElement);
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
window.requestAnimationFrame(update);
counter = document.createElement('div');
counter.className = 'counter';
counter.style.position = 'absolute';
counter.style.top = '50px';
document.body.appendChild(counter);
count = startBunnyCount;
counter.innerHTML = startBunnyCount + ' BUNNIES';
container = stage;
// stage.addChild(container);
stage.on('mousedown', function() {
isAdding = true;
});
stage.on('mouseup', function() {
isAdding = false;
});
document.addEventListener('touchstart', onTouchStart, true);
document.addEventListener('touchend', onTouchEnd, true);
function _handleTextureLoaded(event) {
for (var i = 0; i < startBunnyCount; i++) {
var bunny = new Konva.Image({
image: wabbitTexture,
transformsEnabled: 'position',
hitGraphEnabled: false,
x: 10,
y: 10
}); });
stage.on('mouseup', function() { bunny.speedX = Math.random() * 10;
isAdding = false; bunny.speedY = Math.random() * 10 - 5;
});
document.addEventListener('touchstart', onTouchStart, true);
document.addEventListener('touchend', onTouchEnd, true);
function _handleTextureLoaded (event) {
for (var i = 0; i < startBunnyCount; i++)
{
var bunny = new Konva.Image({
image: wabbitTexture,
transformsEnabled: 'position',
hitGraphEnabled: false,
x : 10,
y : 10
});
bunnys.push(bunny);
bunny.speedX = Math.random() * 10; layer.add(bunny);
bunny.speedY = (Math.random() * 10) - 5;
bunnys.push(bunny);
// bunny.cache();
layer.add(bunny);
bunny.cache();
layer.draw(); layer.draw();
}
}
function onTouchStart(event){
isAdding = true;
}
function onTouchEnd(event){
isAdding = false;
}
function update(){
stats.begin();
if(isAdding) {
// add 10 at a time :)
for (var i = 0; i < amount; i++)
{
var bunny = new Konva.Image({
image: wabbitTexture,
transformsEnabled: 'position',
x : 0,
y : 0
});
bunny.speedX = Math.random() * 10;
bunny.speedY = (Math.random() * 10) - 5;
// bunny.cache();
bunnys.push(bunny);
layer.add(bunny);
bunny.cache();
count++;
}
counter.innerHTML = count + ' BUNNIES';
}
for (var i = 0; i < bunnys.length; i++) {
var bunny = bunnys[i];
bunny.setX(bunny.getX() + bunny.speedX);
bunny.setY(bunny.getY() + bunny.speedY);
bunny.speedY += gravity;
if (bunny.getX() > maxX - wabbitTexture.width)
{
bunny.speedX *= -1;
bunny.setX(maxX - wabbitTexture.width);
}
else if (bunny.getX() < minX)
{
bunny.speedX *= -1;
bunny.setX(minX);
}
if (bunny.getY() > maxY - wabbitTexture.height)
{
bunny.speedY *= -0.85;
bunny.setY(maxY - wabbitTexture.height);
if (Math.random() > 0.5)
{
bunny.speedY -= Math.random() * 6;
}
}
else if (bunny.getY() < minY)
{
bunny.speedY = 0;
bunny.setY(minY);
}
}
layer.drawScene();
requestAnimationFrame(update);
stats.end();
} }
}
function onTouchStart(event) {
isAdding = true;
}
function onTouchEnd(event) {
isAdding = false;
}
function update() {
stats.begin();
if (isAdding) {
// add 10 at a time :)
for (var i = 0; i < amount; i++) {
var bunny = new Konva.Image({
image: wabbitTexture,
transformsEnabled: 'position',
x: 0,
y: 0
});
bunny.speedX = Math.random() * 10;
bunny.speedY = Math.random() * 10 - 5;
bunnys.push(bunny);
layer.add(bunny);
count++;
}
counter.innerHTML = count + ' BUNNIES';
}
for (var i = 0; i < bunnys.length; i++) {
var bunny = bunnys[i];
bunny.setX(bunny.getX() + bunny.speedX);
bunny.setY(bunny.getY() + bunny.speedY);
bunny.speedY += gravity;
if (bunny.getX() > maxX - wabbitTexture.width) {
bunny.speedX *= -1;
bunny.setX(maxX - wabbitTexture.width);
} else if (bunny.getX() < minX) {
bunny.speedX *= -1;
bunny.setX(minX);
}
if (bunny.getY() > maxY - wabbitTexture.height) {
bunny.speedY *= -0.85;
bunny.setY(maxY - wabbitTexture.height);
if (Math.random() > 0.5) {
bunny.speedY -= Math.random() * 6;
}
} else if (bunny.getY() < minY) {
bunny.speedY = 0;
bunny.setY(minY);
}
}
layer.drawScene();
requestAnimationFrame(update);
stats.end();
}
</script> </script>
</body> </body>
</html> </html>