lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-07-15 21:06:19 +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

64
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,
@ -129,7 +192,6 @@ Test.Modules.PERFORMANCE = {
tooltipLayer.add(tooltip);
stage.add(circlesLayer);
stage.add(tooltipLayer);