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

added new performance test in preparation for new hit detection algo investigation

Browse Source
This commit is contained in:
Eric Rowell
2012-08-10 20:48:42 -07:00
parent 5c898e7da5
commit 8c147ee2b5
4 changed files with 77 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
dist/kinetic-core.js vendored
View File

@@ -3,7 +3,7 @@
* http://www.kineticjs.com/
* Copyright 2012, Eric Rowell
* Licensed under the MIT or GPL Version 2 licenses.
* Date: Aug 08 2012
* Date: Aug 10 2012
*
* Copyright (C) 2011 - 2012 by Eric Rowell
*
@@ -3027,7 +3027,7 @@ Kinetic.Stage = Kinetic.Container.extend({
function drawLayer(n) {
var layer = layers[n];
var layerUrl = layer.getCanvas().toDataURL(mimeType, quality);
var layerUrl = layer.getCanvas().toDataURL();
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, 0, 0);
@@ -3652,8 +3652,9 @@ Kinetic.Stage = Kinetic.Container.extend({
this.ids = {};
this.names = {};
this.dragAnim = new Kinetic.Animation();
//shapes hash. rgb keys and shape values
this.shapes = {};
this.dragAnim = new Kinetic.Animation();
},
_draw: function(canvas) {
this._drawChildren(canvas);

6
dist/kinetic-core.min.js vendored
View File

File diff suppressed because one or more lines are too long

5
src/Stage.js
View File

@@ -928,8 +928,9 @@ Kinetic.Stage = Kinetic.Container.extend({
this.ids = {};
this.names = {};
this.dragAnim = new Kinetic.Animation();
//shapes hash. rgb keys and shape values
this.shapes = {};
this.dragAnim = new Kinetic.Animation();
},
_draw: function(canvas) {
this._drawChildren(canvas);

69
tests/js/performanceTests.js
View File

@@ -8,7 +8,6 @@ Test.prototype.tests = {
var layer = new Kinetic.Layer();
startTimer();
console.profile();
for(var n = 0; n < 1000; n++) {
var rect = new Kinetic.Rect({
x: 10,
@@ -23,7 +22,6 @@ Test.prototype.tests = {
}
stage.add(layer);
console.profileEnd();
endTimer('add and draw 1,000 Kinetic rectangles');
},
@@ -65,11 +63,76 @@ Test.prototype.tests = {
setTimeout(function() {
anim.stop();
}, 2000);
setTimeout(function() {
anim.start();
}, 4000);
},
'*DRAWING - draw 10,000 small circles with tooltips': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var circlesLayer = new Kinetic.Layer();
var tooltipLayer = new Kinetic.Layer();
var colors = ["red", "orange", "yellow", "green", "blue", "cyan", "purple"];
var colorIndex = 0;
for(var n = 0; n < 10000; n++) {
// induce scope
( function() {
var i = n;
var color = colors[colorIndex++];
if(colorIndex >= colors.length) {
colorIndex = 0;
}
var randX = Math.random() * stage.getWidth();
var randY = Math.random() * stage.getHeight();
//var randRadius = (Math.random() * 5) + 5
var circle = new Kinetic.Ellipse({
x: randX,
y: randY,
radius: 2,
fill: color
});
circle.on("mousemove", function() {
// update tooltip
var mousePos = stage.getMousePosition();
tooltip.setPosition(mousePos.x + 5, mousePos.y + 5);
tooltip.setText("node: " + i + ", color: " + color);
tooltip.show();
tooltipLayer.draw();
});
circle.on("mouseout", function() {
tooltip.hide();
tooltipLayer.draw();
});
circlesLayer.add(circle);
}());
}
var tooltip = new Kinetic.Text({
text: "",
fontFamily: "Calibri",
fontSize: 12,
padding: 5,
visible: false,
fill: "black",
alpha: 0.75,
textFill: "white"
});
tooltipLayer.add(tooltip);
stage.add(circlesLayer);
stage.add(tooltipLayer);
},
'DRAWING - draw rect vs image from image data': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,