From 813b60b854b417b5b812b3ff73da210cc5537166 Mon Sep 17 00:00:00 2001 From: juliandescottes Date: Fri, 14 Sep 2012 22:20:00 +0200 Subject: [PATCH] Simplified Rectangle.js and pixelUtils --- css/tools.css | 8 +++++ index.html | 5 +++ js/ToolSelector.js | 1 + js/drawingtools/Rectangle.js | 65 ++++++------------------------------ js/utils/pixelUtils.js | 57 +++++++++++++------------------ 5 files changed, 48 insertions(+), 88 deletions(-) diff --git a/css/tools.css b/css/tools.css index 30ed57bf..61bb321a 100644 --- a/css/tools.css +++ b/css/tools.css @@ -45,6 +45,10 @@ background-image: url(../img/tools/icons/rectangle.png); } +.tool-icon.tool-circle { + background-image: url(../img/tools/cursors/circle.png); +} + .tool-icon.tool-move { background-image: url(../img/tools/icons/hand.png); } @@ -77,6 +81,10 @@ cursor: url(../img/tools/cursors/rectangle.png) 4 21, pointer; } +.tool-circle .drawing-canvas-container:hover { + cursor: url(../img/tools/cursors/circle.png) 4 21, pointer; +} + .tool-move .drawing-canvas-container:hover { cursor: url(../img/tools/cursors/hand.png) 14 12, pointer; } diff --git a/index.html b/index.html index edeafe43..936ec60c 100644 --- a/index.html +++ b/index.html @@ -31,6 +31,7 @@
  • +
  • @@ -113,12 +114,16 @@ + + + + diff --git a/js/ToolSelector.js b/js/ToolSelector.js index 78d4f36d..b954ee84 100644 --- a/js/ToolSelector.js +++ b/js/ToolSelector.js @@ -15,6 +15,7 @@ pskl.ToolSelector = (function() { "paintBucket" : new pskl.drawingtools.PaintBucket(), "stroke" : new pskl.drawingtools.Stroke(), "rectangle" : new pskl.drawingtools.Rectangle(), + "circle" : new pskl.drawingtools.Circle(), "move" : new pskl.drawingtools.Move(), "select" : new pskl.drawingtools.Select() }; diff --git a/js/drawingtools/Rectangle.js b/js/drawingtools/Rectangle.js index 45857054..d1da6b12 100644 --- a/js/drawingtools/Rectangle.js +++ b/js/drawingtools/Rectangle.js @@ -29,20 +29,12 @@ ns.Rectangle.prototype.moveToolAt = function(col, row, color, frame, overlay) { overlay.clear(); - - // When the user moussemove (before releasing), we dynamically compute the - // pixel to draw the line and draw this line in the overlay : - var strokePoints = pskl.PixelUtils.getBoundRectanglePixels(this.startCol, this.startRow, col, row); if(color == Constants.TRANSPARENT_COLOR) { color = Constants.SELECTION_TRANSPARENT_COLOR; } - // Drawing current stroke: - for(var i = 0; i< strokePoints.length; i++) { - - - overlay.setPixel(strokePoints[i].col, strokePoints[i].row, color); - } + // draw in overlay + this.drawRectangle(col, row, color, overlay); }; /** @@ -50,52 +42,17 @@ */ ns.Rectangle.prototype.releaseToolAt = function(col, row, color, frame, overlay) { overlay.clear(); - // If the stroke tool is released outside of the canvas, we cancel the stroke: - if(frame.containsPixel(col, row)) { - var strokePoints = pskl.PixelUtils.getBoundRectanglePixels(this.startCol, this.startRow, col, row); - for(var i = 0; i< strokePoints.length; i++) { - // Change model: - frame.setPixel(strokePoints[i].col, strokePoints[i].row, color); - } - // 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) + if(frame.containsPixel(col, row)) { // cancel if outside of canvas + // draw in frame to finalize + this.drawRectangle(col, row, color, frame); } }; - /** - * Get an array of pixels representing the rectangle. - * - * @private - */ - ns.Rectangle.prototype.getRectanglePixels_ = function(x0, x1, y0, y1) { - - var pixels = []; - var swap; - - if(x0 > x1) { - swap = x0; - x0 = x1; - x1 = swap; + ns.Rectangle.prototype.drawRectangle = function (col, row, color, targetFrame) { + var strokePoints = pskl.PixelUtils.getBoundRectanglePixels(this.startCol, this.startRow, col, row); + for(var i = 0; i< strokePoints.length; i++) { + // Change model: + targetFrame.setPixel(strokePoints[i].col, strokePoints[i].row, color); } - if(y0 > y1) { - swap = y0; - y0 = y1; - y1 = swap; - } - - // Creating horizontal sides of the rectangle: - for(var x = x0; x <= x1; x++) { - pixels.push({"col": x, "row": y0}); - pixels.push({"col": x, "row": y1}); - } - - // Creating vertical sides of the rectangle: - for(var y = y0; y <= y1; y++) { - pixels.push({"col": x0, "row": y}); - pixels.push({"col": x1, "row": y}); - } - - return pixels; - }; - + } })(); diff --git a/js/utils/pixelUtils.js b/js/utils/pixelUtils.js index 8390aa21..d4ad6c0f 100644 --- a/js/utils/pixelUtils.js +++ b/js/utils/pixelUtils.js @@ -4,22 +4,11 @@ ns.PixelUtils = { getRectanglePixels : function (x0, y0, x1, y1) { + var rectangle = this.getOrderedRectangleCoordinates(x0, y0, x1, y1); var pixels = []; - var swap; - - if(x0 > x1) { - swap = x0; - x0 = x1; - x1 = swap; - } - if(y0 > y1) { - swap = y0; - y0 = y1; - y1 = swap; - } - for(var x = x0; x <= x1; x++) { - for(var y = y0; y <= y1; y++) { + for(var x = rectangle.x0; x <= rectangle.x1; x++) { + for(var y = rectangle.y0; y <= rectangle.y1; y++) { pixels.push({"col": x, "row": y}); } } @@ -28,33 +17,33 @@ }, getBoundRectanglePixels : function (x0, y0, x1, y1) { + var rectangle = this.getOrderedRectangleCoordinates(x0, y0, x1, y1); var pixels = []; - var swap; - - if(x0 > x1) { - swap = x0; - x0 = x1; - x1 = swap; - } - if(y0 > y1) { - swap = y0; - y0 = y1; - y1 = swap; - } - // Creating horizontal sides of the rectangle: - for(var x = x0; x <= x1; x++) { - pixels.push({"col": x, "row": y0}); - pixels.push({"col": x, "row": y1}); + for(var x = rectangle.x0; x <= rectangle.x1; x++) { + pixels.push({"col": x, "row": rectangle.y0}); + pixels.push({"col": x, "row": rectangle.y1}); } // Creating vertical sides of the rectangle: - for(var y = y0; y <= y1; y++) { - pixels.push({"col": x0, "row": y}); - pixels.push({"col": x1, "row": y}); + for(var y = rectangle.y0; y <= rectangle.y1; y++) { + pixels.push({"col": rectangle.x0, "row": y}); + pixels.push({"col": rectangle.x1, "row": y}); } return pixels; - } + }, + + /** + * Return an object of ordered rectangle coordinate. + * In returned object {x0, y0} => top left corner - {x1, y1} => bottom right corner + * @private + */ + getOrderedRectangleCoordinates : function (x0, y0, x1, y1) { + return { + x0 : Math.min(x0, x1), y0 : Math.min(y0, y1), + x1 : Math.max(x0, x1), y1 : Math.max(y0, y1), + }; + } }; })(); \ No newline at end of file