diff --git a/css/style.css b/css/style.css index 4b6d9d0..41b5185 100644 --- a/css/style.css +++ b/css/style.css @@ -159,13 +159,44 @@ ul, li { * Tool section: */ + .color-tool { + + } + .palette .palette-color { + cursor: pointer; display : inline-block; height : 20px; width : 20px; margin : 5px; } +.palette .palette-color.transparent-color { + background-color: white; + height : 16px; + width : 16px; + border: 2px solid #000; + + background-image: -webkit-gradient( + linear, + left top, + right bottom, + color-stop(0, #fff), + color-stop(0.45, #fff), + color-stop(0.5, #ff0000), + color-stop(0.55, #fff), + color-stop(1, #fff) + ); + background-image: -moz-linear-gradient( + left top, + #fff 0%, + #fff 45%, + #f00 50%, + #fff 55%, + #fff 100% + ); +} + .tools-container { float: left; } diff --git a/index.html b/index.html index f7fd8f8..5eade9e 100644 --- a/index.html +++ b/index.html @@ -39,9 +39,13 @@
- - - +
+ + + +
diff --git a/js/Constants.js b/js/Constants.js index abd47a3..38253dc 100644 --- a/js/Constants.js +++ b/js/Constants.js @@ -1,3 +1,3 @@ var Constants = { - TRANSPARENT_COLOR : "tc" + TRANSPARENT_COLOR : "TRANSPARENT" }; \ No newline at end of file diff --git a/js/drawingtools/Stroke.js b/js/drawingtools/Stroke.js index 68229d5..ca4cdc4 100644 --- a/js/drawingtools/Stroke.js +++ b/js/drawingtools/Stroke.js @@ -53,7 +53,17 @@ 0, 0, this.canvasOverlay.width, this.canvasOverlay.height); // Drawing current stroke: - for(var i = 0; i< strokePoints.length; i++) { + for(var i = 0; i< strokePoints.length; i++) { + + if(color == Constants.TRANSPARENT_COLOR) { + // When mousemoving the stroke tool, we draw in the canvas overlay above the drawing canvas. + // If the stroke color is transparent, we won't be + // able to see it during the movement. + // We set it to a semi-opaque white during the tool mousemove allowing to see colors below the stroke. + // When the stroke tool will be released, It will draw a transparent stroke, + // eg deleting the equivalent of a stroke. + color = "rgba(255, 255, 255, 0.6)"; + } this.drawPixelInCanvas(strokePoints[i].col, strokePoints[i].row, this.canvasOverlay, color, dpi); } }; diff --git a/js/piskel.js b/js/piskel.js index 6051bb5..04152da 100644 --- a/js/piskel.js +++ b/js/piskel.js @@ -467,9 +467,21 @@ $.namespace("pskl"); onPaletteClick : function (event) { var color = $(event.target).data("color"); - if (null !== color) { - //debugger; - var colorPicker = $('#color-picker'); + var colorPicker = $('#color-picker'); + if (color == "TRANSPARENT") { + // We can set the current palette color to transparent. + // You can then combine this transparent color with an advanced + // tool for customized deletions. + // Eg: bucket + transparent: Delete a colored area + // Stroke + transparent: hollow out the equivalent of a stroke + penColor = Constants.TRANSPARENT_COLOR; + + // The colorpicker can't be set to a transparent state. + // We set its background to white and insert the + // string "TRANSPARENT" to mimic this state: + colorPicker[0].color.fromString("#fff"); + colorPicker.val("TRANSPARENT"); + } else if (null !== color) { colorPicker[0].color.fromString(color); penColor = color; }