From 4e664c7ec062d126e32994c25fac53a8b48f6f8c Mon Sep 17 00:00:00 2001 From: Aftermaths Date: Wed, 30 Sep 2015 12:00:20 +0100 Subject: [PATCH] erase and cursor --- .DS_Store | Bin 6148 -> 6148 bytes public/css/canvas.css | 18 ++++++++++++++-- public/images/eraser-cursor.png | Bin 0 -> 4265 bytes public/images/eraser.png | Bin 0 -> 4403 bytes .../js/angular/controller/canvasController.js | 20 +++++++++++++----- public/js/angular/templates/canvas.html | 18 +++++++++------- public/js/pixel.js | 15 ++++++------- server.js | 2 +- 8 files changed, 49 insertions(+), 24 deletions(-) create mode 100644 public/images/eraser-cursor.png create mode 100644 public/images/eraser.png diff --git a/.DS_Store b/.DS_Store index 5008ddfcf53c02e82d7eee2e57c38e5672ef89f6..6d526b3cbad1f21a430d8114eabee2d3e71c9ecd 100644 GIT binary patch delta 361 zcmZoMXfc=|#>B)qF;Q%yo}wrt0|NsP3otNbG9)LJ7Z)Vu{ zlp%>B2U!-V<7ZMqPG)h5fx%5iCT12^Hg*n9E^ZJI5afyt&d4thE=epYEp|#QiU#vC zQ&N+l?103Q3>Z5kKR*Y~PD~2ROf8QW5OL1WD@n}EODzhn2bl!X8xx+Hmy%!ZlwX>c zQXB&n49`p{$%q#a4Jb-21L_S(%u5Z+EY3{I%*iaNcmav(Y9m8)9R+g(<60es zYIAb~9R(9(^V(X00~{REnx>Avkp;C~ixw|gx@`H1!$*O>0|G`+xG;zSu`q~%1deS? ne8vI_oXy-E+#JAw+?e>Cc{0CAjHu~2NHo+1YW5HK<@2y9kle#WxdfcX^DW_AvK4xj>{$am(+{342+ UKzW7)kiy9(Jj$D6L{=~Z02rPQkN^Mx diff --git a/public/css/canvas.css b/public/css/canvas.css index ced2a80..53faec6 100644 --- a/public/css/canvas.css +++ b/public/css/canvas.css @@ -15,10 +15,15 @@ body { position: absolute; border: 1px solid black; } -.board { +.board-draw { position: absolute; border: 1px solid black; - cursor: url('/images/paintbrush.png'), auto; + cursor: url('/images/paintbrush.png') 0 45, auto; +} +.board-erase { + position: absolute; + border: 1px solid black; + cursor: url('/images/eraser-cursor.png') 5 38, auto; } .canvases { margin-top: 70px; @@ -39,6 +44,15 @@ body { margin-left: 10px; vertical-align: middle; } +.eraser { + float: left; + margin-top: 10px; + width: 50px; + height: 50px; + margin-left: 10px; + background: none; + vertical-align: middle; +} .colour-palette { left: 50px; position: fixed; diff --git a/public/images/eraser-cursor.png b/public/images/eraser-cursor.png new file mode 100644 index 0000000000000000000000000000000000000000..013b46e5235e659c8ee4cf4e584cc45e7f805f1c GIT binary patch literal 4265 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 Drawing colour palette toggle + eraser {{imgDesc()}} - +
- +
-
-
    -
    -
    - -
    +
    +
      +
      +
      + + +

      diff --git a/public/js/pixel.js b/public/js/pixel.js index a190768..4753f26 100644 --- a/public/js/pixel.js +++ b/public/js/pixel.js @@ -2,23 +2,22 @@ function BoardInterface(context) { this.context = context; } -BoardInterface.prototype.createPixel = function(x, y, size, pixelColor) { +BoardInterface.prototype.createPixel = function(action, x, y, size, pixelColor) { x = Math.floor(x / size) * size; - y = Math.floor(y / size) * size + (3 * size); //this adjustment at the end is for the paintbrush cursor + y = Math.floor(y / size) * size; //this adjustment at the end is for the paintbrush cursor - PixelGenerator.createDot(this.context, x, y, size, pixelColor); + PixelGenerator.createDot(this.context, action, x, y, size, pixelColor); }; var PixelGenerator = (function() { - function createDot(ctx, x, y, size, pixelColor) { - var colour = WhatColour.pickColour(ctx, x, y); - if (colour === 'rgba(0,0,0,0)') { + function createDot(ctx, action, x, y, size, pixelColor) { + if (action === 'erase') { + ctx.clearRect(x, y, size, size); + } else if (action === 'draw') { ctx.fillStyle = pixelColor; ctx.fillRect(x, y, size, size); - } else { - ctx.clearRect(x, y, size, size); } }; diff --git a/server.js b/server.js index 27110bd..635e087 100644 --- a/server.js +++ b/server.js @@ -56,7 +56,7 @@ io.on('connection', function(socket) { }); socket.on('coordinates', function(data) { - imgID = data[3]; + imgID = data[4]; socket.broadcast.to(imgID).emit('coordinates', data); });