diff --git a/README.md b/README.md index 541330e..21ab723 100644 --- a/README.md +++ b/README.md @@ -8,4 +8,6 @@ on which points may be added to create a polygon. Activates inputs with class `canvas-area` and data attribute `data-image-url`. Or activate with `$('input').canvasAreaDraw(options)` +Add Black out sections - use data attribute data-blackout and specify points in comma separated sets separated by semi-colons + Demo at [http://iakob.com/canvas-area-draw/demo.html] diff --git a/demo.html b/demo.html index 53faddc..0d17b20 100644 --- a/demo.html +++ b/demo.html @@ -18,7 +18,8 @@

Image Maps Canvas Drawing

Image 1

+ data-image-url="http://farm8.staticflickr.com/7259/6956772778_2fa755a228.jpg" + data-blackout="150,396,114,371,111,363,102,363,93,348,95,334,102,330,100,319,105,304,124,287,133,287,141,283,154,279,181,283,198,291,211,316,207,324,209,332,208,348,201,354,206,366,195,370,183,385,160,385">208,221,208,202,198,199,201,191,218,176,229,155,221,132,196,117,169,131,157,158,163,172,177,164,173,180,190,185,192,199,187,201,185,222

Image 2

@@ -31,6 +32,6 @@

Image 2

- + diff --git a/jquery.canvasAreaDraw.js b/jquery.canvasAreaDraw.js index 268001c..1d8f0f8 100644 --- a/jquery.canvasAreaDraw.js +++ b/jquery.canvasAreaDraw.js @@ -10,12 +10,13 @@ var init = function(index, input, options) { - var points, activePoint, settings; + var points, blackoutpoints, activePoint, settings; var $reset, $canvas, ctx, image; - var draw, mousedown, stopdrag, move, resize, reset, rightclick, record; + var draw, drawblackout, mousedown, stopdrag, move, resize, reset, rightclick, record; settings = $.extend({ - imageUrl: $(this).attr('data-image-url') + imageUrl: $(this).attr('data-image-url'), + blackout: $(this).attr('data-blackout') }, options); if ( $(this).val().length ) { @@ -25,6 +26,17 @@ } else { points = []; } + + // process blackout points if any + if ( settings.blackout != undefined && settings.blackout.length > 0 ) { + blackoutpoints = settings.blackout.split(';').map(function(pointstr) { + return pointstr.split(',').map(function(point) { + return parseInt(point, 10); + }); + }); + } else { + blackoutpoints = []; + } $reset = $(''); $canvas = $(''); @@ -155,13 +167,38 @@ ctx.lineTo(points[i], points[i+1]); } } - ctx.closePath(); + ctx.closePath(); ctx.fillStyle = 'rgba(255,0,0,0.3)'; ctx.fill(); ctx.stroke(); - + + drawblackout(); + record(); }; + + drawblackout = function() { + if (blackoutpoints.length == 0) { + return false; + } + ctx.globalCompositeOperation = 'destination-over'; + ctx.lineWidth = 1; + + for (var i = 0; i < blackoutpoints.length; i++) { + if (blackoutpoints[i].length >= 2) { + ctx.beginPath(); + ctx.moveTo(blackoutpoints[i][0], blackoutpoints[i][1]); + for (var j = 0; j < blackoutpoints[i].length; j+=2) { + if (blackoutpoints[i].length > 2 && j > 1) { + ctx.lineTo(blackoutpoints[i][j], blackoutpoints[i][j+1]); + } + } + ctx.closePath(); + ctx.fillStyle = 'rgba(0,0,0,1.0)'; + ctx.fill(); + } + } + }; record = function() { $(input).val(points.join(','));