From 0a50d4cb3234a81ebad51a5670f5b20e334f88ee Mon Sep 17 00:00:00 2001 From: Jebu Date: Fri, 21 Jan 2022 01:09:34 +0100 Subject: [PATCH 1/2] Added stroke, eraser, changed to data-attribute --- resources/css/bcPaint.css | 26 +++++++++++-- resources/js/bcPaint.js | 78 ++++++++++++++++++++++++++++++++------- 2 files changed, 87 insertions(+), 17 deletions(-) diff --git a/resources/css/bcPaint.css b/resources/css/bcPaint.css index 14b37c4..0483cce 100644 --- a/resources/css/bcPaint.css +++ b/resources/css/bcPaint.css @@ -5,8 +5,28 @@ cursor: pointer; border-radius: 5px; margin: 0 5px; + border: 1px #ccc solid; } +.bcPaint-palette-stroke { + + background-color:#AAA; + display: inline-block; + margin: 2px; + border: 2px #ccc solid; + border-radius: 15px; -#bcPaint-palette > .selected { - border: 2px solid #343a40; -} \ No newline at end of file +} +#bcPaint-palette > .selectedColor { + border: 2px solid #777; +} +#bcPaint-palette > .selectedStroke { + border: 3px solid #777; +} +#bcPaint-palette { + width:1100px; +} +#bcPaint-canvas-container { + height:800px; + width:1100px; + border: 1px #ccc solid; +} diff --git a/resources/js/bcPaint.js b/resources/js/bcPaint.js index db5058c..e43053d 100644 --- a/resources/js/bcPaint.js +++ b/resources/js/bcPaint.js @@ -3,15 +3,21 @@ * Copyright (c) 2018-2021 Alexandre Bobkov * Licensed under MIT * @author Alexandre Bobkov - * @version 0.7.3 + * @contributor Jeppe Bundsgaard + * @version 0.8 */ $(document).ready(function(){ $('body').on('click', '.bcPaint-palette-color', function(){ - $(this).parent().find('.selected').removeClass('selected'); - $(this).addClass('selected'); - $.fn.bcPaint.setColor($(this).css('background-color')); + $.fn.bcPaint.setColor($(this).data('color')); }); + $('body').on('click', '.bcPaint-palette-stroke', function(){ + $.fn.bcPaint.setStroke($(this).data('stroke')); + }); + $('body').on('click', '#bcPaint-eraser', function(){ + $.fn.bcPaint.setEraser() + }); + $('body').on('click', '#bcPaint-reset', function(){ $.fn.bcPaint.clearCanvas(); @@ -28,16 +34,19 @@ $(document).ready(function(){ * Private variables **/ var isDragged = false, + isEraser = false, startPoint = { x:0, y:0 }, templates = { container : $('
'), - palette : $('
Color Palette
'), + palette : $('
'), color : $('
'), + stroke : $('
'), canvasContainer : $('
'), canvasPane : $(''), bottom : $('
'), buttonReset : $(''), - buttonSave : $('') + buttonSave : $(''), + eraser : $('') }, paintCanvas, paintContext; @@ -50,7 +59,9 @@ $(document).ready(function(){ return this.each(function () { var rootElement = $(this), colorSet = $.extend({}, $.fn.bcPaint.defaults, options), + strokeSet = $.extend({}, $.fn.bcPaint.defaults, options), defaultColor = (rootElement.val().length > 0) ? rootElement.val() : colorSet.defaultColor, + defaultStroke = strokeSet.defaultStroke, container = templates.container.clone(), // header = templates.header.clone(), palette = templates.palette.clone(), @@ -59,7 +70,9 @@ $(document).ready(function(){ bottom = templates.bottom.clone(), buttonReset = templates.buttonReset.clone(), buttonSave = templates.buttonSave.clone(), - color; + color, + stroke, + eraser = templates.eraser.clone(); // assembly pane rootElement.append(container); @@ -69,15 +82,26 @@ $(document).ready(function(){ container.append(bottom); // header.append(palette); canvasContainer.append(canvasPane); - bottom.append(buttonReset); - bottom.append(buttonSave); +// bottom.append(buttonReset); +// bottom.append(buttonSave); // assembly color palette $.each(colorSet.colors, function (i) { color = templates.color.clone(); color.css('background-color', $.fn.bcPaint.toHex(colorSet.colors[i])); + color.attr('data-color',colorSet.colors[i]) palette.append(color); }); + $.each(strokeSet.strokes, function (i) { + stroke = templates.stroke.clone(); + stroke.css('height', strokeSet.strokes[i]+"px"); //.find('.bcPaint-palette-stroke') + stroke.css('width', strokeSet.strokes[i]+"px"); + stroke.attr('data-stroke',strokeSet.strokes[i]) + palette.append(stroke); + }); + eraser.css("float","right"); + palette.append(eraser) + // set canvas pane width and height var bcCanvas = rootElement.find('canvas'); @@ -91,6 +115,8 @@ $(document).ready(function(){ // set color $.fn.bcPaint.setColor(defaultColor); + // set color + $.fn.bcPaint.setStroke(defaultStroke); // bind mouse actions paintCanvas.onmousedown = $.fn.bcPaint.onMouseDown; @@ -131,7 +157,6 @@ $(document).ready(function(){ * Extend plugin **/ $.extend(true, $.fn.bcPaint, { - /** * Dispatch mouse event */ @@ -179,16 +204,39 @@ $(document).ready(function(){ **/ onMouseMove : function(e){ if(isDragged){ - paintContext.lineTo(e.offsetX, e.offsetY); - paintContext.stroke(); + if(isEraser) { + paintContext.clearRect(e.offsetX, e.offsetY,paintContext.lineWidth*2,paintContext.lineWidth*2); + } + else { + paintContext.lineTo(e.offsetX, e.offsetY); + paintContext.stroke(); + } } }, /** - * Set selected color + * Set selected color, disable eraser **/ setColor : function(color){ + $('.bcPaint-palette-color.selectedColor').removeClass('selectedColor'); + $('.bcPaint-palette-color[data-color="'+color+'"]').addClass('selectedColor'); paintContext.strokeStyle = $.fn.bcPaint.toHex(color); + isEraser=false + }, + /** + * Set selected stroke + **/ + setStroke : function(stroke){ + $('.bcPaint-palette-stroke.selectedStroke').removeClass('selectedStroke'); + $('.bcPaint-palette-stroke[data-stroke="'+stroke+'"]').addClass('selectedStroke'); + + paintContext.lineWidth = stroke; + }, + /** + * enable eraser + **/ + setEraser : function(){ + isEraser=!isEraser }, /** @@ -242,11 +290,13 @@ $(document).ready(function(){ // default color set colors : [ '000000', '444444', '999999', 'DDDDDD', '#e83e8c', '#dc3545', - '#fd7e14', '#ffc107', '#28a745', '#20c997', '#6f42c1', '#007bff' + '#fd7e14', '#ffc107', '#28a745', '#20c997', '#6f42c1', '#007bff','#FFFFFF' ], // extend default set addColors : [], + strokes : [ 1, 2, 4, 8, 16, 24], + defaultStroke : 2, }; })(jQuery); From a6ec2f07920abc482b206c69754d71c3167886c6 Mon Sep 17 00:00:00 2001 From: Jebu Date: Fri, 21 Jan 2022 12:07:52 +0100 Subject: [PATCH 2/2] Moved events into function --- resources/js/bcPaint.js | 46 ++++++++++++++++++++--------------------- 1 file changed, 22 insertions(+), 24 deletions(-) diff --git a/resources/js/bcPaint.js b/resources/js/bcPaint.js index e43053d..05157b4 100644 --- a/resources/js/bcPaint.js +++ b/resources/js/bcPaint.js @@ -7,28 +7,6 @@ * @version 0.8 */ -$(document).ready(function(){ - $('body').on('click', '.bcPaint-palette-color', function(){ - $.fn.bcPaint.setColor($(this).data('color')); - }); - $('body').on('click', '.bcPaint-palette-stroke', function(){ - $.fn.bcPaint.setStroke($(this).data('stroke')); - }); - $('body').on('click', '#bcPaint-eraser', function(){ - $.fn.bcPaint.setEraser() - }); - - - $('body').on('click', '#bcPaint-reset', function(){ - $.fn.bcPaint.clearCanvas(); - }); - - $('body').on('click', '#bcPaint-export', function(){ - $.fn.bcPaint.export(); - }); -}); - - (function( $ ) { /** * Private variables @@ -99,7 +77,7 @@ $(document).ready(function(){ stroke.attr('data-stroke',strokeSet.strokes[i]) palette.append(stroke); }); - eraser.css("float","right"); +// eraser.css("float","right"); palette.append(eraser) @@ -150,6 +128,24 @@ $(document).ready(function(){ e.preventDefault(); } }, false); + + // Palette events + palette.on('click', '.bcPaint-palette-color', function(){ + $.fn.bcPaint.setColor($(this).data('color')); + }); + palette.on('click', '.bcPaint-palette-stroke', function(){ + $.fn.bcPaint.setStroke($(this).data('stroke')); + }); + palette.on('click', '#bcPaint-eraser', function(){ + $.fn.bcPaint.setEraser() + }); + palette.on('click', '#bcPaint-reset', function(){ + $.fn.bcPaint.clearCanvas(); + }); + palette.on('click', '#bcPaint-export', function(){ + $.fn.bcPaint.export(); + }); + }); } @@ -218,7 +214,7 @@ $(document).ready(function(){ * Set selected color, disable eraser **/ setColor : function(color){ - $('.bcPaint-palette-color.selectedColor').removeClass('selectedColor'); + $('.selectedColor').removeClass('selectedColor'); $('.bcPaint-palette-color[data-color="'+color+'"]').addClass('selectedColor'); paintContext.strokeStyle = $.fn.bcPaint.toHex(color); isEraser=false @@ -236,6 +232,8 @@ $(document).ready(function(){ * enable eraser **/ setEraser : function(){ + $('.selectedColor').removeClass('selectedColor'); + $('#bcPaint-eraser').addClass('selectedColor'); isEraser=!isEraser },