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

optimized line shape drawing logic, and also added image cropping performance tests

Browse Source
This commit is contained in:
Eric Rowell
2012-11-30 21:59:48 -08:00
parent 8a195618cf
commit 8e5297033b
4 changed files with 80 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
tests/js/performanceTests.js
View File

@@ -1,4 +1,67 @@
Test.Modules.PERFORMANCE = {
'*draw 1000 cropped images': function(containerId) {
var imageObj = new Image();
imageObj.onload = function() {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
startTimer();
for(var n = 0; n < 1000; n++) {
var darth = new Kinetic.Image({
x: 200,
y: 75,
image: imageObj,
width: 107,
height: 75,
crop: [186, 211, 292 - 186, 285 - 211],
draggable: true,
scale: [0.5, 0.5]
});
layer.add(darth);
}
stage.add(layer);
endTimer('draw 1000 cropped images');
};
imageObj.src = '../assets/darth-vader.jpg';
},
'*draw 1000 pre-processed cropped images': function(containerId) {
var imageObj = new Image();
imageObj.onload = function() {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
startTimer();
for(var n = 0; n < 1000; n++) {
var darth = new Kinetic.Image({
x: 200,
y: 75,
image: imageObj,
width: 107,
height: 75,
//crop: [186, 211, 292 - 186, 285 - 211],
draggable: true,
scale: [0.5, 0.5]
});
layer.add(darth);
}
stage.add(layer);
endTimer('draw 1000 pre-processed images');
};
imageObj.src = '../assets/cropped-darth.jpg';
},
'DRAWING - draw rect': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
@@ -51,10 +114,10 @@ Test.Modules.PERFORMANCE = {
var centerX = stage.getWidth() / 2 - 100 / 2;
var anim = new Kinetic.Animation(function(frame) {
rect.attrs.x = amplitude * Math.sin(frame.time * 2 * Math.PI / period) + centerX;
rect.attrs.x = amplitude * Math.sin(frame.time * 2 * Math.PI / period) + centerX;
//console.log(frame.timeDiff)
}, layer);
//console.log(frame.timeDiff)
}, layer);
anim.start();
@@ -77,7 +140,7 @@ Test.Modules.PERFORMANCE = {
var colors = ["red", "orange", "yellow", "green", "blue", "cyan", "purple"];
var colorIndex = 0;
startTimer();
startTimer();
for(var n = 0; n < 10000; n++) {
// induce scope
( function() {
@@ -89,7 +152,7 @@ Test.Modules.PERFORMANCE = {
var randX = Math.random() * stage.getWidth();
var randY = Math.random() * stage.getHeight();
var circle = new Kinetic.Ellipse({
x: randX,
y: randY,
@@ -115,7 +178,7 @@ Test.Modules.PERFORMANCE = {
circlesLayer.add(circle);
}());
}
var tooltip = new Kinetic.Text({
text: "",
fontFamily: "Calibri",
@@ -128,13 +191,12 @@ Test.Modules.PERFORMANCE = {
});
tooltipLayer.add(tooltip);
stage.add(circlesLayer);
stage.add(tooltipLayer);
endTimer('drew 10,000 circles');
//document.body.appendChild(circlesLayer.bufferCanvas.element)
},