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

Stroke tool

Browse Source 
Add stroke tool
new icons for tools
started some refactoring to help having a big redraw loop
This commit is contained in:
Vince
2012-09-02 00:44:55 +02:00
parent 6b7294e8c5
commit 700c6ab144
17 changed files with 279 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
js/ToolSelector.js
View File

@@ -11,7 +11,8 @@ pskl.ToolSelector = (function() {
var toolInstances = {
"simplePen" : new pskl.drawingtools.SimplePen(),
"eraser" : new pskl.drawingtools.Eraser(),
"paintBucket" : new pskl.drawingtools.PaintBucket()
"paintBucket" : new pskl.drawingtools.PaintBucket(),
"stroke" : new pskl.drawingtools.Stroke()
};
var currentSelectedTool = toolInstances.simplePen;
var previousSelectedTool = toolInstances.simplePen;

27
js/drawingtools/BaseTool.js
View File

@@ -8,12 +8,13 @@
ns.BaseTool = function() {};
ns.BaseTool.prototype.applyToolOnFrameAt = function(col, row, frame, color) {};
ns.BaseTool.prototype.applyToolAt = function(col, row, frame, color, canvas, dpi) {};
ns.BaseTool.prototype.applyToolOnCanvasAt = function(col, row, canvas, color, dpi) {};
ns.BaseTool.prototype.releaseToolAt = function() {};
ns.BaseTool.prototype.moveToolAt = function(col, row, frame, color, canvas, dpi) {};
ns.BaseTool.prototype.releaseToolAt = function(col, row, frame, color, canvas, dpi) {};
// TODO: Remove that when we have the centralized redraw loop
ns.BaseTool.prototype.drawPixelInCanvas = function (col, row, canvas, color, dpi) {
var context = canvas.getContext('2d');
if(color == undefined || color == Constants.TRANSPARENT_COLOR) {
@@ -27,6 +28,7 @@
}
};
// TODO: Remove that when we have the centralized redraw loop
ns.BaseTool.prototype.drawFrameInCanvas = function (frame, canvas, dpi) {
var color;
for(var col = 0, num_col = frame.length; col < num_col; col++) {
@@ -36,4 +38,21 @@
}
}
};
// For some tools, we need a fake canvas that overlay the drawing canvas. These tools are
// generally 'drap and release' based tools (stroke, selection, etc) and the fake canvas
// will help to visualize the tool interaction (without modifying the canvas).
ns.BaseTool.prototype.createCanvasOverlay = function (canvas) {
var overlayCanvas = document.createElement("canvas");
overlayCanvas.className = "canvas-overlay";
overlayCanvas.setAttribute("width", canvas.width);
overlayCanvas.setAttribute("height", canvas.height);
canvas.parentNode.appendChild(overlayCanvas);
return overlayCanvas;
};
ns.BaseTool.prototype.removeCanvasOverlays = function () {
$(".canvas-overlay").remove();
};
})();

18
js/drawingtools/Eraser.js
View File

@@ -16,23 +16,21 @@
/**
* @override
*/
ns.Eraser.prototype.applyToolOnFrameAt = function(col, row, frame, color) {
ns.Eraser.prototype.applyToolAt = function(col, row, frame, color, canvas, dpi) {
// Change model:
frame[col][row] = Constants.TRANSPARENT_COLOR;
};
/**
* @override
*/
ns.Eraser.prototype.applyToolOnCanvasAt = function(col, row, canvas, frame, color, dpi) {
// Draw on canvas:
// TODO: Remove that when we have the centralized redraw loop
this.drawPixelInCanvas(col, row, canvas, Constants.TRANSPARENT_COLOR, dpi);
};
/**
* @override
*/
ns.Eraser.prototype.releaseToolAt = function() {
// Do nothing
console.log('Eraser release');
ns.Eraser.prototype.moveToolAt = function(col, row, frame, color, canvas, dpi) {
this.applyToolAt(col, row, frame, color, canvas, dpi);
};
})();

59
js/drawingtools/PaintBucket.js
View File

@@ -15,45 +15,38 @@
/**
* @override
*/
ns.PaintBucket.prototype.applyToolOnFrameAt = function(col, row, frame, color) {};
ns.PaintBucket.prototype.applyToolAt = function(col, row, frame, color, canvas, dpi) {
/**
* @override
*/
ns.PaintBucket.prototype.applyToolOnCanvasAt = function(col, row, canvas, frame, replacementColor, dpi) {
// Change model:
var targetColor = pskl.utils.normalizeColor(frame[col][row]);
//this.recursiveFloodFill(frame, col, row, targetColor, replacementColor);
this.queueLinearFloodFill(frame, col, row, targetColor, replacementColor);
//this.recursiveFloodFill_(frame, col, row, targetColor, color);
this.queueLinearFloodFill_(frame, col, row, targetColor, color);
// Draw in canvas:
// TODO: Remove that when we have the centralized redraw loop
this.drawFrameInCanvas(frame, canvas, dpi);
};
/**
* @override
*/
ns.PaintBucket.prototype.releaseToolAt = function() {
// Do nothing
console.log('PaintBucket release');
};
/**
* Flood-fill (node, target-color, replacement-color):
1. Set Q to the empty queue.
2. If the color of node is not equal to target-color, return.
3. Add node to Q.
4. For each element n of Q:
5. If the color of n is equal to target-color:
6. Set w and e equal to n.
7. Move w to the west until the color of the node to the west of w no longer matches target-color.
8. Move e to the east until the color of the node to the east of e no longer matches target-color.
9. Set the color of nodes between w and e to replacement-color.
10. For each node n between w and e:
11. If the color of the node to the north of n is target-color, add that node to Q.
12. If the color of the node to the south of n is target-color, add that node to Q.
13. Continue looping until Q is exhausted.
14. Return.
* 1. Set Q to the empty queue.
* 2. If the color of node is not equal to target-color, return.
* 3. Add node to Q.
* 4. For each element n of Q:
* 5. If the color of n is equal to target-color:
* 6. Set w and e equal to n.
* 7. Move w to the west until the color of the node to the west of w no longer matches target-color.
* 8. Move e to the east until the color of the node to the east of e no longer matches target-color.
* 9. Set the color of nodes between w and e to replacement-color.
* 10. For each node n between w and e:
* 11. If the color of the node to the north of n is target-color, add that node to Q.
* 12. If the color of the node to the south of n is target-color, add that node to Q.
* 13. Continue looping until Q is exhausted.
* 14. Return.
*
* @private
*/
ns.PaintBucket.prototype.queueLinearFloodFill = function(frame, col, row, targetColor, replacementColor) {
ns.PaintBucket.prototype.queueLinearFloodFill_ = function(frame, col, row, targetColor, replacementColor) {
var queue = [];
var dy = [-1, 0, 1, 0];
@@ -104,7 +97,7 @@
break;
}
}
}
};
/**
* Basic Flood-fill implementation (Stack explosion !):
@@ -119,7 +112,7 @@
*
* @private
*/
ns.PaintBucket.prototype.recursiveFloodFill = function(frame, col, row, targetColor, replacementColor) {
ns.PaintBucket.prototype.recursiveFloodFill_ = function(frame, col, row, targetColor, replacementColor) {
// Step 1:
if( col < 0 ||

25
js/drawingtools/SimplePen.js
View File

@@ -15,27 +15,20 @@
/**
* @override
*/
ns.SimplePen.prototype.applyToolOnFrameAt = function(col, row, frame, color) {
ns.SimplePen.prototype.applyToolAt = function(col, row, frame, color, canvas, dpi) {
// Change model:
var color = pskl.utils.normalizeColor(color);
if (color != frame[col][row]) {
frame[col][row] = color;
}
// Draw on canvas:
// TODO: Remove that when we have the centralized redraw loop
this.drawPixelInCanvas(col, row, canvas, color, dpi);
};
/**
* @override
*/
ns.SimplePen.prototype.applyToolOnCanvasAt = function(col, row, canvas, frame, color, dpi) {
this.drawPixelInCanvas(col, row, canvas, color, dpi);
ns.SimplePen.prototype.moveToolAt = function(col, row, frame, color, canvas, dpi) {
this.applyToolAt(col, row, frame, color, canvas, dpi);
};
/**
* @override
*/
ns.SimplePen.prototype.releaseToolAt = function() {
// Do nothing
console.log('SimplePen release');
};
})();

128
js/drawingtools/Stroke.js Normal file
View File

@@ -0,0 +1,128 @@
/*
* @provide pskl.drawingtools.SimplePen
*
* @require pskl.utils
*/
(function() {
var ns = $.namespace("pskl.drawingtools");
ns.Stroke = function() {
this.toolId = "tool-stroke"
// Stroke's first point coordinates (set in applyToolAt)
this.startCol = null;
this.startRow = null;
// Stroke's second point coordinates (changing dynamically in moveToolAt)
this.endCol = null;
this.endRow = null;
this.canvasOverlay = null;
};
pskl.utils.inherit(ns.Stroke, ns.BaseTool);
/**
* @override
*/
ns.Stroke.prototype.applyToolAt = function(col, row, frame, color, canvas, dpi) {
this.startCol = col;
this.startRow = row;
// When drawing a stroke we don't change the model instantly, since the
// user can move his cursor to change the stroke direction and length
// dynamically. Instead we draw the (preview) stroke in a fake canvas that
// overlay the drawing canvas.
// We wait for the releaseToolAt callback to impact both the
// frame model and canvas rendering.
// The fake canvas where we will draw the preview of the stroke:
this.canvasOverlay = this.createCanvasOverlay(canvas);
// Drawing the first point of the stroke in the fake overlay canvas:
this.drawPixelInCanvas(col, row, this.canvasOverlay, color, dpi);
};
ns.Stroke.prototype.moveToolAt = function(col, row, frame, color, canvas, dpi) {
this.endCol = col;
this.endRow = row;
// When the user moussemove (before releasing), we dynamically compute the
// pixel to draw the line and draw this line in the overlay canvas:
var strokePoints = this.getLinePixels_(this.startCol, this.endCol, this.startRow, this.endRow);
// Clean overlay canvas:
this.canvasOverlay.getContext("2d").clearRect(
0, 0, this.canvasOverlay.width, this.canvasOverlay.height);
// Drawing current stroke:
for(var i = 0; i< strokePoints.length; i++) {
this.drawPixelInCanvas(strokePoints[i].col, strokePoints[i].row, this.canvasOverlay, color, dpi);
}
};
/**
* @override
*/
ns.Stroke.prototype.releaseToolAt = function(col, row, frame, color, canvas, dpi) {
this.endCol = col;
this.endRow = row;
// If the stroke tool is released outside of the canvas, we cancel the stroke:
if(col < 0 || row < 0 || col > frame.length || row > frame[0].length) {
this.removeCanvasOverlays();
return;
}
// The user released the tool to draw a line. We will compute the pixel coordinate, impact
// the model and draw them in the drawing canvas (not the fake overlay anymore)
var strokePoints = this.getLinePixels_(this.startCol, this.endCol, this.startRow, this.endRow);
for(var i = 0; i< strokePoints.length; i++) {
// Change model:
frame[strokePoints[i].col][strokePoints[i].row] = color;
// Draw in canvas:
// TODO: Remove that when we have the centralized redraw loop
this.drawPixelInCanvas(strokePoints[i].col, strokePoints[i].row, canvas, color, dpi);
}
// For now, we are done with the stroke tool and don't need an overlay anymore:
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;
};
})();

46
js/piskel.js
View File

@@ -204,7 +204,8 @@ $.namespace("pskl");
addColorToPalette : function (color) {
if (color && color != Constants.TRANSPARENT_COLOR && paletteColors.indexOf(color) == -1) {
var colorEl = document.createElement("li");
var colorEl = document.createElement("li");
colorEl.className = "palette-color";
colorEl.setAttribute("data-color", color);
colorEl.setAttribute("title", color);
colorEl.style.background = color;
@@ -379,11 +380,14 @@ $.namespace("pskl");
$.publish(Events.CANVAS_RIGHT_CLICKED);
}
var spriteCoordinate = this.getSpriteCoordinate(event);
currentToolBehavior.applyToolOnFrameAt(
spriteCoordinate.col, spriteCoordinate.row, currentFrame, penColor);
currentToolBehavior.applyToolOnCanvasAt(
spriteCoordinate.col, spriteCoordinate.row, drawingAreaCanvas, currentFrame, penColor, drawingCanvasDpi);
currentToolBehavior.applyToolAt(
spriteCoordinate.col,
spriteCoordinate.row,
currentFrame,
penColor,
drawingAreaCanvas,
drawingCanvasDpi);
piskel.persistToLocalStorageRequest();
},
@@ -391,12 +395,18 @@ $.namespace("pskl");
//this.updateCursorInfo(event);
if (isClicked) {
var spriteCoordinate = this.getSpriteCoordinate(event)
currentToolBehavior.applyToolOnFrameAt(
spriteCoordinate.col, spriteCoordinate.row, currentFrame, penColor);
currentToolBehavior.applyToolOnCanvasAt(
spriteCoordinate.col, spriteCoordinate.row, drawingAreaCanvas, currentFrame, penColor, drawingCanvasDpi);
var spriteCoordinate = this.getSpriteCoordinate(event);
currentToolBehavior.moveToolAt(
spriteCoordinate.col,
spriteCoordinate.row,
currentFrame,
penColor,
drawingAreaCanvas,
drawingCanvasDpi);
// TODO(vincz): Find a way to move that to the model instead of being at the interaction level.
// Eg when drawing, it may make sense to have it here. However for a non drawing tool,
// you don't need to draw anything when mousemoving and you request useless localStorage.
piskel.persistToLocalStorageRequest();
}
},
@@ -407,15 +417,23 @@ $.namespace("pskl");
// the user was probably drawing on the canvas.
// Note: The mousemove movement (and the mouseup) may end up outside
// of the drawing canvas.
// TODO: Remove that when we have the centralized redraw loop
this.createPreviews();
}
if(isRightClicked) {
$.publish(Events.CANVAS_RIGHT_CLICK_RELEASED);
}
isClicked = false;
isRightClicked = false;
var spriteCoordinate = this.getSpriteCoordinate(event)
currentToolBehavior.releaseToolAt(spriteCoordinate.col, spriteCoordinate.row, penColor);
var spriteCoordinate = this.getSpriteCoordinate(event);
currentToolBehavior.releaseToolAt(
spriteCoordinate.col,
spriteCoordinate.row,
currentFrame,
penColor,
drawingAreaCanvas,
drawingCanvasDpi);
},
// TODO(vincz/julz): Refactor to make this disappear in a big event-driven redraw loop