mirror/piskel
1
0
Fork 0
mirror of https://github.com/piskelapp/piskel.git synced 2023-08-10 21:12:52 +03:00
Code Issues Projects Releases Wiki Activity

Add interpolation when using the pen tool quickly

Browse Source
This commit is contained in:
Vince
2012-09-02 17:49:28 +02:00
parent 946444a16b
commit 9758aa62d9
4 changed files with 98 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
js/drawingtools/BaseTool.js
View File

@@ -55,4 +55,41 @@
ns.BaseTool.prototype.removeCanvasOverlays = function () {
$(".canvas-overlay").remove();
};
/**
* Bresenham line algorihtm: Get an array of pixels from
* start and end coordinates.
*
* http://en.wikipedia.org/wiki/Bresenham's_line_algorithm
* http://stackoverflow.com/questions/4672279/bresenham-algorithm-in-javascript
*
* @private
*/
ns.BaseTool.prototype.getLinePixels_ = function(x0, x1, y0, y1) {
var pixels = [];
var dx = Math.abs(x1-x0);
var dy = Math.abs(y1-y0);
var sx = (x0 < x1) ? 1 : -1;
var sy = (y0 < y1) ? 1 : -1;
var err = dx-dy;
while(true){
// Do what you need to for this
pixels.push({"col": x0, "row": y0});
if ((x0==x1) && (y0==y1)) break;
var e2 = 2*err;
if (e2>-dy){
err -= dy;
x0 += sx;
}
if (e2 < dx) {
err += dx;
y0 += sy;
}
}
return pixels;
};
})();

23
js/drawingtools/SimplePen.js
View File

@@ -10,6 +10,9 @@
this.toolId = "tool-pen"
};
this.previousCol = null;
this.previousRow = null;
pskl.utils.inherit(ns.SimplePen, ns.BaseTool);
/**
@@ -17,6 +20,9 @@
*/
ns.SimplePen.prototype.applyToolAt = function(col, row, frame, color, canvas, dpi) {
this.previousCol = col;
this.previousRow = row;
// Change model:
var color = pskl.utils.normalizeColor(color);
if (color != frame[col][row]) {
@@ -29,6 +35,21 @@
};
ns.SimplePen.prototype.moveToolAt = function(col, row, frame, color, canvas, dpi) {
this.applyToolAt(col, row, frame, color, canvas, dpi);
if((Math.abs(col - this.previousCol) > 1) || (Math.abs(row - this.previousRow) > 1)) {
// The pen movement is too fast for the mousemove frequency, there is a gap between the
// current point and the previously drawn one.
// We fill the gap by calculating missing dots (simple linear interpolation) and draw them.
var interpolatedPixels = this.getLinePixels_(col, this.previousCol, row, this.previousRow);
for(var i=0, l=interpolatedPixels.length; i<l; i++) {
this.applyToolAt(interpolatedPixels[i].col, interpolatedPixels[i].row, frame, color, canvas, dpi);
}
}
else {
this.applyToolAt(col, row, frame, color, canvas, dpi);
}
this.previousCol = col;
this.previousRow = row;
};
})();

37
js/drawingtools/Stroke.js
View File

@@ -99,41 +99,4 @@
this.removeCanvasOverlays();
};
/**
* Bresenham line algorihtm: Get an array of pixels from
* start and end coordinates.
*
* http://en.wikipedia.org/wiki/Bresenham's_line_algorithm
* http://stackoverflow.com/questions/4672279/bresenham-algorithm-in-javascript
*
* @private
*/
ns.Stroke.prototype.getLinePixels_ = function(x0, x1, y0, y1) {
var pixels = [];
var dx = Math.abs(x1-x0);
var dy = Math.abs(y1-y0);
var sx = (x0 < x1) ? 1 : -1;
var sy = (y0 < y1) ? 1 : -1;
var err = dx-dy;
while(true){
// Do what you need to for this
pixels.push({"col": x0, "row": y0});
if ((x0==x1) && (y0==y1)) break;
var e2 = 2*err;
if (e2>-dy){
err -= dy;
x0 += sx;
}
if (e2 < dx) {
err += dx;
y0 += sy;
}
}
return pixels;
};
})();