wbrawner/piskel
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored Normal file
View file

@ -0,0 +1 @@
*.DS_Store

30
css/style.css
View file

@ -127,27 +127,39 @@ ul, li {
z-index: 1;
}
.canvas-overlay {
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
.drawing-canvas-container {
float: left;
}
.tool-paint-bucket .drawing-canvas-container:hover {
cursor: url(../img/tools/paint-bucket.png) 18 17, pointer;
cursor: url(../img/tools/cursors/paint-bucket.png) 18 17, pointer;
}
.tool-pen .drawing-canvas-container:hover {
cursor: url(../img/tools/pen.png) 7 21, pointer;
cursor: url(../img/tools/cursors/pen.png) 7 21, pointer;
}
.tool-eraser .drawing-canvas-container:hover {
cursor: url(../img/tools/eraser.png) 5 21, pointer;
cursor: url(../img/tools/cursors/eraser.png) 5 21, pointer;
}
.tool-stroke .drawing-canvas-container:hover {
cursor: url(../img/tools/cursors/pen.png) 5 21, pointer;
}
/**
* Tool section:
*/
#palette li {
.palette .palette-color {
display : inline-block;
height : 20px;
width : 20px;
@ -185,15 +197,19 @@ ul, li {
}
.tool-icon.tool-pen {
background: #fff url(../img/tools/pen.png) 3px 3px no-repeat;
background: #fff url(../img/tools/icons/pen.png) 3px 3px no-repeat;
}
.tool-icon.tool-paint-bucket {
background: #fff url(../img/tools/paint-bucket.png) 3px 3px no-repeat;
background: #fff url(../img/tools/icons/paint-bucket.png) 3px 3px no-repeat;
}
.tool-icon.tool-eraser {
background: #fff url(../img/tools/eraser.png) 3px 3px no-repeat;
background: #fff url(../img/tools/icons/eraser.png) 3px 3px no-repeat;
}
.tool-icon.tool-stroke {
background: #fff url(../img/tools/icons/stroke.png) 3px 3px no-repeat;
}
#preview-fps {

0
img/tools/eraser.png → img/tools/cursors/eraser.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 774 B

After

Width:  |  Height:  |  Size: 774 B

0
img/tools/paint-bucket.png → img/tools/cursors/paint-bucket.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 50 KiB

After

Width:  |  Height:  |  Size: 50 KiB

0
img/tools/pen.png → img/tools/cursors/pen.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 47 KiB

After

Width:  |  Height:  |  Size: 47 KiB

BIN
img/tools/icons/eraser.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 774 B

BIN
img/tools/icons/paint-bucket.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 50 KiB

BIN
img/tools/icons/pen.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 48 KiB

BIN
img/tools/icons/stroke.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 48 KiB

33
index.html
View file

@ -15,24 +15,36 @@
</head>
<body>
<div class='debug left-nav'>
<!-- Frame actions: -->
<button onclick="piskel.storeSheet()" class="action-button">Save Framesheet</button>
<button id='add-frame-button' class="action-button">
Add a Frame
</button>
<ul id="preview-list">
</ul>
<!-- List of frames: -->
<ul id="preview-list"></ul>
</div>
<div class='main-panel'>
<!-- Drawing area: -->
<div id="drawing-canvas-container" class="drawing-canvas-container canvas-container">
<div class="canvas-background"></div>
</div>
<!-- Tool section: -->
<div id="tools-container" class="tools-container">
<div class="tool-icon tool-pen" data-tool-id="tool-pen"></div>
<div class="tool-icon tool-eraser" data-tool-id="tool-eraser"></div>
<div class="tool-icon tool-paint-bucket" data-tool-id="tool-paint-bucket"></div>
<div class="tool-icon tool-pen" data-tool-id="tool-pen" title="Pen tool"></div>
<div class="tool-icon tool-eraser" data-tool-id="tool-eraser" title="Eraser tool"></div>
<div class="tool-icon tool-paint-bucket" data-tool-id="tool-paint-bucket" title="Bucket tool"></div>
<div class="tool-icon tool-stroke" data-tool-id="tool-stroke" title="Stroke tool"></div>
<input id="color-picker" class="color {hash:true}" type="text" value=""/>
<ul id="palette" onclick="piskel.onPaletteClick(event)"></ul>
<ul id="palette" class="palette" onclick="piskel.onPaletteClick(event)"></ul>
</div>
<!-- Animation preview: -->
<div class='preview-container'>
<div id='preview-canvas-container' class="canvas-container">
<div class="canvas-background"></div>
@ -45,21 +57,28 @@
</div>
<div id="cursorInfo"></div>
<!-- Core libraries: -->
<script src="js/lib/jquery-1.8.0.js"></script>
<script src="js/lib/pubsub.js"></script>
<!-- Application wide configuration -->
<script src="js/Constants.js"></script>
<script src="js/Events.js"></script>
<script src="js/utils.js"></script>
<!-- Libraries -->
<script src="js/utils.js"></script>
<script src="js/lib/jsColor_1_4_0/jscolor.js"></script>
<!-- Application libraries-->
<script src="js/frameSheetModel.js"></script>
<script src="js/drawingtools/BaseTool.js"></script>
<script src="js/drawingtools/SimplePen.js"></script>
<script src="js/drawingtools/Eraser.js"></script>
<script src="js/drawingtools/Stroke.js"></script>
<script src="js/drawingtools/PaintBucket.js"></script>
<script src="js/ToolSelector.js"></script>
<!-- Application controller and initialization -->
<script src="js/piskel.js"></script>
</body>
</html>

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;

25
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.moveToolAt = function(col, row, frame, color, canvas, dpi) {};
ns.BaseTool.prototype.releaseToolAt = function() {};
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) {};
/**
* @override
*/
ns.PaintBucket.prototype.applyToolOnCanvasAt = function(col, row, canvas, frame, replacementColor, dpi) {
ns.PaintBucket.prototype.applyToolAt = function(col, row, frame, color, canvas, 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 ||

21
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;
}
};
/**
* @override
*/
ns.SimplePen.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, color, dpi);
};
/**
* @override
*/
ns.SimplePen.prototype.releaseToolAt = function() {
// Do nothing
console.log('SimplePen release');
ns.SimplePen.prototype.moveToolAt = function(col, row, frame, color, canvas, dpi) {
this.applyToolAt(col, row, frame, color, canvas, dpi);
};
})();

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;
};
})();

40
js/piskel.js
View file

@ -205,6 +205,7 @@ $.namespace("pskl");
addColorToPalette : function (color) {
if (color && color != Constants.TRANSPARENT_COLOR && paletteColors.indexOf(color) == -1) {
var colorEl = document.createElement("li");
colorEl.className = "palette-color";
colorEl.setAttribute("data-color", color);
colorEl.setAttribute("title", color);
colorEl.style.background = color;
@ -379,10 +380,13 @@ $.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