diff --git a/Sketchy-1.zip b/Sketchy-1.zip index 49be831..3d958a2 100644 Binary files a/Sketchy-1.zip and b/Sketchy-1.zip differ diff --git a/img/demos/iheart.png b/img/demos/iheart.png new file mode 100644 index 0000000..45999aa Binary files /dev/null and b/img/demos/iheart.png differ diff --git a/img/demos/save.png b/img/demos/save.png new file mode 100644 index 0000000..a348b58 Binary files /dev/null and b/img/demos/save.png differ diff --git a/img/demos/settings.png b/img/demos/settings.png new file mode 100644 index 0000000..dd9d91e Binary files /dev/null and b/img/demos/settings.png differ diff --git a/img/demos/tree.png b/img/demos/tree.png new file mode 100644 index 0000000..c6d588e Binary files /dev/null and b/img/demos/tree.png differ diff --git a/img/demos/types.png b/img/demos/types.png new file mode 100644 index 0000000..7af088b Binary files /dev/null and b/img/demos/types.png differ diff --git a/index.html b/index.html index 4c60162..29a46ea 100644 --- a/index.html +++ b/index.html @@ -34,7 +34,7 @@
- +

Line Width 2

@@ -90,7 +90,7 @@
    • -
    • + @@ -164,7 +164,6 @@ - diff --git a/js/events.js b/js/events.js index b417c3f..905a2f7 100644 --- a/js/events.js +++ b/js/events.js @@ -1,5 +1,7 @@ "use strict"; +$(window).resize(sizeAndPos); + function save() { switch(save.background) { case 'white': { @@ -55,7 +57,7 @@ function save() { window.active = false; - if( settings.type = 'eraser' ) return; + if( settings.type == 'eraser' ) return; if(window.points.history.last < window.points.history.length-1) { window.points.history.splice(window.points.history.last+1); } diff --git a/js/functions.js b/js/functions.js index 4bb5a4a..1da937d 100644 --- a/js/functions.js +++ b/js/functions.js @@ -3,14 +3,14 @@ function sizeAndPos() { - var data = c.getImageData(0,0, $c.width(), $c.height()); + var data = window.points.history[window.points.history.last].data || c.getImageData(0,0, $c.width(), $c.height()); var w = $(window).width(), - h = $(window).height(); + h = $(window).height() - 53; $c.attr('width', w * window.devicePixelRatio); - $c.attr('height',(h - 53) * window.devicePixelRatio); + $c.attr('height',h * window.devicePixelRatio); $c.css({ 'width' : w, - 'height' : h - 53 + 'height' : h }); c.clearRect(0,0, width(), height()); c.putImageData(data, 0, 0); @@ -29,7 +29,7 @@ function threshold(x1, y1, x2, y2, threshold) { return false; } -function line(x1, y1, x2, y2, opts, overlay) { +function draw(x1, y1, x2, y2, opts, overlay) { opts = opts || {}; var c = window.c; if( overlay ) var c = window.o; @@ -114,11 +114,15 @@ function startPoint(x, y) { } if( old.type == 'line' && current.type == 'line' ) { - if( points[points.indexOf(old)-1].type !== 'line' ) erase(old.x-5, old.y-5, old.x+5, old.y+5, true); - line(old.x, old.y, x, y); + if( points[points.indexOf(old)-1].type !== 'line' ) { + o.clearRect(old.x-3, old.y-3, 6, 6, true); + draw(old.x, old.y, x, y); + } else + draw(old.x, old.y, x, y); } - if( points.length > 1 && ((start && threshold(start.x, start.y, x, y)) || threshold(old.x, old.y, x, y, 2)) ) { + var thresholds = window.mobile ? [10, 5] : [5, 2]; + if( points.length > 1 && ((start && threshold(start.x, start.y, x, y, thresholds[0])) || threshold(old.x, old.y, x, y, thresholds[1])) ) { window.active = false; points[points.length-1].type = ''; points[points.length-1].start = undefined; @@ -135,7 +139,7 @@ function drawPoint(x,y) { capture.type = 'pen'; } case 'pen': { - line(capture.x, capture.y, x, y); + draw(capture.x, capture.y, x, y); var current = { x : x, @@ -148,7 +152,7 @@ function drawPoint(x,y) { break; } case 'sketch': { - line(capture.x, capture.y, x, y); + draw(capture.x, capture.y, x, y); var current = { x : x, y : y, @@ -162,13 +166,13 @@ function drawPoint(x,y) { var x = points[i].x - current.x, y = points[i].y - current.y; - line(points[i].x - x*0.2, points[i].y - y*0.2, current.x + x*0.2, current.y + y*0.2, {strokeStyle: 'rgba(0,0,0,0.4)', lineWidth: settings.lineWidth/20}) + draw(points[i].x - x*0.2, points[i].y - y*0.2, current.x + x*0.2, current.y + y*0.2, {strokeStyle: 'rgba(0,0,0,0.4)', lineWidth: settings.lineWidth/20}) } } break; } case 'fur': { - line(capture.x, capture.y, x, y); + draw(capture.x, capture.y, x, y); var current = { x : x, y : y, @@ -182,7 +186,7 @@ function drawPoint(x,y) { var x = points[i].x - current.x, y = points[i].y - current.y; var l = settings.furLength / 100 || 0.2; - line(points[i].x + x*l, points[i].y + y*l, current.x - x*l, current.y - y*l, {strokeStyle: 'rgba(0,0,0,0.4)', lineWidth: settings.lineWidth/2}) + draw(points[i].x + x*l, points[i].y + y*l, current.x - x*l, current.y - y*l, {strokeStyle: 'rgba(0,0,0,0.4)', lineWidth: settings.lineWidth/2}) } } break; diff --git a/js/libs/touch.js b/js/libs/touch.js index c449212..cada189 100644 --- a/js/libs/touch.js +++ b/js/libs/touch.js @@ -17,6 +17,7 @@ longTapTimeout = null if (touch.last) { touch.el.trigger('longTap') + window.touchEl = touch.el; touch = {} } } @@ -90,7 +91,7 @@ if((_isPointerType = isPointerEventType(e, 'move')) && !isPrimaryTouch(e)) return firstTouch = _isPointerType ? e : e.touches[0] - cancelLongTap() + if( $.moveCancel ) cancelLongTap() touch.x2 = firstTouch.pageX touch.y2 = firstTouch.pageY diff --git a/js/main.js b/js/main.js index b0626dd..dbab896 100644 --- a/js/main.js +++ b/js/main.js @@ -17,6 +17,7 @@ $(document).ready(function() { window.points = []; window.$c = $('canvas'); window.points.history = [{ data: c.createImageData($c.width(), $c.height()), points: []}]; + window.points.history.last = 0; sizeAndPos(); //$(window).resize(sizeAndPos); @@ -30,7 +31,7 @@ $(document).ready(function() { yepnope({ test: window.mobile, - yep : ['js/mobile-events.js', 'js/libs/color-picker-touch.js'], + yep : ['js/libs/touch.js', 'js/mobile-events.js', 'js/libs/color-picker-touch.js'], nope: ['js/events.js', 'js/libs/color-picker.js'] }) diff --git a/js/mobile-events.js b/js/mobile-events.js index b6e5c75..438972c 100644 --- a/js/mobile-events.js +++ b/js/mobile-events.js @@ -48,19 +48,15 @@ function save() { $('#save').removeClass('hidden'); }) $c.last().on('touchstart', function(e) { - e.preventDefault(); var xy = relative(e.changedTouches[0].pageX, e.changedTouches[0].pageY); startPoint(xy.x, xy.y); window.active = true; }).on('touchmove', function(e) { - e.preventDefault(); if (!window.active || settings.type == 'line') return; var xy = relative(e.changedTouches[0].pageX, e.changedTouches[0].pageY); drawPoint(xy.x, xy.y); }).on('touchend', function(e) { - e.preventDefault(); window.active = false; - if( settings.type == 'eraser' ) return; if(window.points.history.last < window.points.history.length-1) { @@ -72,6 +68,12 @@ function save() { points: window.points.slice(0) }) window.points.history.last = window.points.history.length-1; + }).on('longTap', function(e) { + if( points[points.length-1].type == 'line' ) { + window.active = false; + points[points.length-1].type = ''; + points[points.length-1].start = undefined; + } }) // Value Selector