diff options
| -rw-r--r-- | assets/test/brush/index.html | 56 |
1 files changed, 32 insertions, 24 deletions
diff --git a/assets/test/brush/index.html b/assets/test/brush/index.html index 68c81e0..4bdaf98 100644 --- a/assets/test/brush/index.html +++ b/assets/test/brush/index.html @@ -2,9 +2,12 @@ body,html{margin:0;padding:0;} #hud { position: absolute; top: 0; left: 0; pointer-events: none; } canvas { position: absolute; top: 0; left: 0; } +#mask { pointer-events: none; } +#scratch { display: none; } </style> <canvas id="canvas"></canvas> <canvas id="mask"></canvas> +<canvas id="scratch"></canvas> <div id="hud"></div> <script src="/assets/javascripts/vendor/bower_components/jquery/dist/jquery.min.js"></script> @@ -19,6 +22,7 @@ canvas { position: absolute; top: 0; left: 0; } <script> var ctx = canvas.getContext('2d') +var scratchCtx = scratch.getContext('2d') var w = mask.width = canvas.width = window.innerWidth var h = mask.height = canvas.height = window.innerHeight @@ -31,16 +35,22 @@ var mymouse = new mouse({ drawing = true lastPoint.a = cursor.x.a lastPoint.b = cursor.y.a - mask.clearRect(0,0,w,h) - imagedata = ctx.getImageData( 0, 0, canvas.width, canvas.height ) - data = imagedata.data +// mask.clearRect(0,0,w,h) +// imagedata = ctx.getImageData( 0, 0, canvas.width, canvas.height ) +// data = imagedata.data }, drag: function(e, cursor){ - newPoint.a = cursor.x.a - newPoint.b = cursor.x.b + newPoint.a = cursor.x.b + newPoint.b = cursor.y.b + drawLine(lastPoint, newPoint) + + lastPoint.a = newPoint.a + lastPoint.b = newPoint.b }, up: function(e, cursor, new_cursor){ drawing = false + drawLine({ a: cursor.x.a, b: cursor.y.a }, { a: cursor.x.b, b: cursor.y.b }) + console.log("hi") }, }) @@ -50,38 +60,35 @@ function drawLine (u, v) { var xmin = Math.min(u.a, v.a) var ymin = Math.min(u.b, v.b) - var w = abs(u.a - v.a) + radius*2 - var h = abs(u.b - v.b) + radius*2 + var w = scratch.width = abs(u.a - v.a) + radius*2 + var h = scratch.height = abs(u.b - v.b) + radius*2 var p = new point (0,0) var radius2 = radius * radius - + var imagedata = ctx.createImageData(w, h) var d = imagedata.data var i, j, t, dist - var len = sqrt(dist2(u, v)) - - if (len == 0) return - for (i = 0; i < w; i++) { for (j = 0; j < h; j++) { t = (j * w + i) * 4 - p.a = i - radius + xmin - p.b = j - radius + ymin + p.a = xmin + i - radius + p.b = ymin + j - radius - dist = distToSegmentSquared( p, u, v, len ) + dist = distToSegmentSquared( p, u, v ) if (dist > radius2) { d[t+3] = 0 } else { - d[t+3] = round((1 - sqrt(dist)/radius) * 255) + d[t+3] = round( pow(1 - sqrt(dist)/radius, 2) * 255) } } } - ctx.putImageData(imagedata, u.a, u.b) + scratchCtx.putImageData(imagedata, 0, 0) + ctx.drawImage(scratch, xmin - radius, ymin - radius) } drawLine( new point( 100, 100 ), new point( 100, 400 ) ) @@ -89,13 +96,14 @@ drawLine( new point( 100, 100 ), new point( 100, 400 ) ) // drawLine( new point( 100, 100 ), new point( 400, 400 ) ) function sqr(x) { return x * x } -function dist2(v, w) { return sqr(v.b - w.b) + sqr(v.b - w.b) } -function distToSegmentSquared (p, v, w, len) { - var t = ((p.a - v.a) * (w.a - v.a) + (p.b - v.b) * (w.b - v.b)) / len; - if (t < 0) return dist2(p, v); - if (t > 1) return dist2(p, w); - return dist2(p, { x: v.a + t * (w.a - v.a), - y: v.b + t * (w.b - v.b) }); +function dist2(v, w) { return sqr(v.a - w.a) + sqr(v.b - w.b) } +function distToSegmentSquared (p, v, w) { + var l2 = dist2(v, w) + var t = ((p.a - v.a) * (w.a - v.a) + (p.b - v.b) * (w.b - v.b)) / l2 + if (t < 0) return dist2(p, v) + if (t > 1) return dist2(p, w) + return dist2(p, { a: v.a + t * (w.a - v.a), + b: v.b + t * (w.b - v.b) }) } |