lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-07-15 15:36:27 +08:00
Code Issues Actions 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/shapes/Line.js
View File

@ -24,19 +24,19 @@ Kinetic.Line.prototype = {
this._setDrawFuncs();
},
drawFunc: function(context) {
var lastPos = {};
var lastPos = {}, points = this.getPoints(), length = points.length, dashArray = this.getDashArray(), dashLength = dashArray.length;
context.beginPath();
context.moveTo(this.attrs.points[0].x, this.attrs.points[0].y);
context.moveTo(points[0].x, points[0].y);
for(var n = 1; n < this.attrs.points.length; n++) {
var x = this.attrs.points[n].x;
var y = this.attrs.points[n].y;
if(this.attrs.dashArray.length > 0) {
for(var n = 1; n < length; n++) {
var x = points[n].x;
var y = points[n].y;
if(dashLength > 0) {
// draw dashed line
var lastX = this.attrs.points[n - 1].x;
var lastY = this.attrs.points[n - 1].y;
this._dashedLine(context, lastX, lastY, x, y, this.attrs.dashArray);
var lastX = points[n - 1].x;
var lastY = points[n - 1].y;
this._dashedLine(context, lastX, lastY, x, y, dashArray);
}
else {
// draw normal line

BIN
tests/assets/cropped-darth.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

BIN
tests/assets/cropped-darth.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

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)
},