mirror of
https://github.com/konvajs/konva.git
synced 2025-04-05 20:48:28 +08:00
470 lines
13 KiB
JavaScript
470 lines
13 KiB
JavaScript
Test.Modules.PERFORMANCE = {
|
|
'draw 1000 cropped and scaled 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 and scaled images');
|
|
|
|
};
|
|
imageObj.src = '../assets/darth-vader.jpg';
|
|
},
|
|
'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: 53,
|
|
height: 37,
|
|
crop: [186, 211, 292 - 186, 285 - 211],
|
|
draggable: true
|
|
});
|
|
|
|
layer.add(darth);
|
|
}
|
|
|
|
stage.add(layer);
|
|
endTimer('draw 1000 cropped images');
|
|
|
|
};
|
|
imageObj.src = '../assets/darth-vader.jpg';
|
|
},
|
|
'draw 1000 scaled 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,
|
|
draggable: true,
|
|
scale: 0.5
|
|
});
|
|
|
|
layer.add(darth);
|
|
}
|
|
|
|
stage.add(layer);
|
|
endTimer('draw 1000 scaled images');
|
|
|
|
};
|
|
imageObj.src = '../assets/darth-vader.jpg';
|
|
},
|
|
'*draw 1000 pre-processed cropped and scaled 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,
|
|
width: 578,
|
|
height: 200
|
|
});
|
|
var layer = new Kinetic.Layer();
|
|
|
|
startTimer();
|
|
for(var n = 0; n < 1000; n++) {
|
|
var rect = new Kinetic.Rect({
|
|
x: 10,
|
|
y: 10,
|
|
width: 100,
|
|
height: 100,
|
|
fill: 'yellow',
|
|
stroke: 'blue'
|
|
});
|
|
|
|
layer.add(rect);
|
|
}
|
|
stage.add(layer);
|
|
|
|
endTimer('add and draw 1,000 Kinetic rectangles');
|
|
|
|
},
|
|
'ANIMATION - test animation frame rate': function(containerId) {
|
|
var stage = new Kinetic.Stage({
|
|
container: containerId,
|
|
width: 578,
|
|
height: 200
|
|
});
|
|
var layer = new Kinetic.Layer();
|
|
var rect = new Kinetic.Rect({
|
|
x: 200,
|
|
y: 100,
|
|
width: 100,
|
|
height: 50,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
strokeWidth: 4
|
|
});
|
|
|
|
layer.add(rect);
|
|
stage.add(layer);
|
|
|
|
var amplitude = 150;
|
|
var period = 1000;
|
|
// in ms
|
|
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;
|
|
|
|
//console.log(frame.timeDiff)
|
|
}, layer);
|
|
|
|
anim.start();
|
|
|
|
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;
|
|
|
|
startTimer();
|
|
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 circle = new Kinetic.Ellipse({
|
|
x: randX,
|
|
y: randY,
|
|
radius: 2,
|
|
fill: color
|
|
});
|
|
|
|
circle.on("mousemove", function() {
|
|
// update tooltip
|
|
console.log('mouseover')
|
|
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);
|
|
|
|
endTimer('drew 10,000 circles');
|
|
|
|
//document.body.appendChild(circlesLayer.bufferCanvas.element)
|
|
|
|
},
|
|
'DRAWING - draw rect vs image from image data': function(containerId) {
|
|
var stage = new Kinetic.Stage({
|
|
container: containerId,
|
|
width: 578,
|
|
height: 200
|
|
});
|
|
var layer = new Kinetic.Layer();
|
|
stage.add(layer);
|
|
|
|
var canvas = layer.getCanvas();
|
|
var context = layer.getContext();
|
|
|
|
startTimer();
|
|
for(var n = 0; n < 10000; n++) {
|
|
context.fillStyle = 'blue';
|
|
context.lineWidth = 6;
|
|
context.strokeStyle = 'red';
|
|
context.fillRect(10, 10, 100, 100);
|
|
context.strokeRect(10, 10, 100, 100);
|
|
}
|
|
endTimer('draw 10,000 rects with canvas API');
|
|
|
|
startTimer();
|
|
var imageData = context.getImageData(7, 7, 106, 106);
|
|
endTimer('create image data');
|
|
|
|
layer.canvas.clear();
|
|
|
|
startTimer();
|
|
for(var n = 0; n < 10000; n++) {
|
|
context.putImageData(imageData, 7, 7);
|
|
}
|
|
endTimer('draw 10,000 images with putImageData');
|
|
|
|
},
|
|
'DRAWING - draw rect vs image from data url': function(containerId) {
|
|
var stage = new Kinetic.Stage({
|
|
container: containerId,
|
|
width: 578,
|
|
height: 200
|
|
});
|
|
var layer = new Kinetic.Layer();
|
|
stage.add(layer);
|
|
|
|
var canvas = layer.getCanvas();
|
|
var context = layer.getContext();
|
|
|
|
startTimer();
|
|
for(var n = 0; n < 10000; n++) {
|
|
context.fillStyle = 'blue';
|
|
context.lineWidth = 6;
|
|
context.strokeStyle = 'red';
|
|
context.fillRect(10, 10, 100, 100);
|
|
context.strokeRect(10, 10, 100, 100);
|
|
}
|
|
endTimer('draw 10,000 rects with canvas API');
|
|
|
|
startTimer();
|
|
var url = layer.toDataURL();
|
|
endTimer('create data url');
|
|
|
|
var imageObj = new Image();
|
|
imageObj.onload = function() {
|
|
layer.canvas.clear();
|
|
|
|
startTimer();
|
|
for(var n = 0; n < 10000; n++) {
|
|
context.drawImage(imageObj, 7, 7, 106, 106, 10, 10, 106, 106);
|
|
}
|
|
endTimer('draw 10,000 images with image object from data url');
|
|
}
|
|
imageObj.src = url;
|
|
|
|
},
|
|
'DRAWING - draw 1,000 stars': function(containerId) {
|
|
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 star = new Kinetic.Star({
|
|
innerRadius: 20,
|
|
outerRadius: 50,
|
|
fill: 'yellow',
|
|
stroke: 'black',
|
|
strokeWidth: 5,
|
|
numPoints: 5,
|
|
x: Math.random() * stage.getWidth(),
|
|
y: Math.random() * stage.getHeight(),
|
|
shadow: {
|
|
offset: 5,
|
|
color: 'black',
|
|
blur: 5,
|
|
alpha: 0.5
|
|
}
|
|
});
|
|
|
|
layer.add(star);
|
|
}
|
|
|
|
stage.add(layer);
|
|
|
|
endTimer('draw 1,000 stars');
|
|
},
|
|
'DRAWING - draw 1,000 cached stars': function(containerId) {
|
|
var stage = new Kinetic.Stage({
|
|
container: containerId,
|
|
width: 578,
|
|
height: 200
|
|
});
|
|
var layer = new Kinetic.Layer();
|
|
|
|
var star = new Kinetic.Star({
|
|
innerRadius: 20,
|
|
outerRadius: 50,
|
|
fill: 'yellow',
|
|
stroke: 'black',
|
|
strokeWidth: 5,
|
|
numPoints: 5,
|
|
x: 70,
|
|
y: 70,
|
|
shadow: {
|
|
offset: 5,
|
|
color: 'black',
|
|
blur: 5,
|
|
alpha: 0.5
|
|
}
|
|
});
|
|
|
|
layer.add(star);
|
|
stage.add(layer);
|
|
|
|
star.toImage({
|
|
callback: function(img) {
|
|
startTimer();
|
|
for(var n = 0; n < 1000; n++) {
|
|
var image = new Kinetic.Image({
|
|
image: img,
|
|
x: Math.random() * stage.getWidth(),
|
|
y: Math.random() * stage.getHeight(),
|
|
offset: 70
|
|
});
|
|
|
|
layer.add(image);
|
|
}
|
|
|
|
layer.draw();
|
|
|
|
endTimer('draw 1,000 cached stars');
|
|
}
|
|
});
|
|
},
|
|
'PATH - add map path': function(containerId) {
|
|
startTimer();
|
|
var stage = new Kinetic.Stage({
|
|
container: containerId,
|
|
width: 1024,
|
|
height: 480,
|
|
throttle: 80,
|
|
scale: 0.5,
|
|
x: 50,
|
|
y: 10
|
|
});
|
|
var mapLayer = new Kinetic.Layer();
|
|
|
|
for(var key in worldMap.shapes) {
|
|
var c = worldMap.shapes[key];
|
|
|
|
var path = new Kinetic.Path({
|
|
data: c,
|
|
fill: '#ccc',
|
|
stroke: '#999',
|
|
strokeWidth: 1
|
|
});
|
|
|
|
if(key === 'US')
|
|
test(path.dataArray[0].command === 'M', 'first command should be a moveTo');
|
|
|
|
path.on('mouseover', function() {
|
|
this.setFill('red');
|
|
mapLayer.draw();
|
|
});
|
|
|
|
path.on('mouseout', function() {
|
|
this.setFill('#ccc');
|
|
mapLayer.draw();
|
|
});
|
|
|
|
mapLayer.add(path);
|
|
}
|
|
|
|
stage.add(mapLayer);
|
|
|
|
endTimer('time build and to draw map');
|
|
|
|
mapLayer.beforeDraw(startTimer);
|
|
mapLayer.afterDraw(function() {
|
|
endTimer('redraw layer');
|
|
});
|
|
}
|
|
};
|