From a217ba8ae93591c5f1881425e9a3f2d6842e92de Mon Sep 17 00:00:00 2001 From: Mitja Felicijan Date: Wed, 19 Sep 2018 01:53:20 +0200 Subject: content update --- draw/app.css | 58 -------------------------------------------- draw/app.js | 66 --------------------------------------------------- draw/index.html | 38 ----------------------------- tools/draw/app.css | 58 ++++++++++++++++++++++++++++++++++++++++++++ tools/draw/app.js | 66 +++++++++++++++++++++++++++++++++++++++++++++++++++ tools/draw/index.html | 38 +++++++++++++++++++++++++++++ 6 files changed, 162 insertions(+), 162 deletions(-) delete mode 100644 draw/app.css delete mode 100644 draw/app.js delete mode 100644 draw/index.html create mode 100644 tools/draw/app.css create mode 100644 tools/draw/app.js create mode 100644 tools/draw/index.html diff --git a/draw/app.css b/draw/app.css deleted file mode 100644 index 40e4838..0000000 --- a/draw/app.css +++ /dev/null @@ -1,58 +0,0 @@ -@charset "utf-8"; - -* { - box-sizing: border-box; - background-color: transparent; - margin: 0; - padding: 0; - border: 0; - list-style-type: none; - outline: none; - text-decoration: none; - position: relative; - box-shadow: none; - -moz-osx-font-smoothing: grayscale !important; - text-rendering: optimizeLegibility !important; - -webkit-font-smoothing: antialiased !important; - font-family: Arial, Helvetica, sans-serif; -} - -body { - margin: 0; - padding: 0; - font-size: 13px; -} - -section { - position: fixed; - left: 0; - top: 0; - right: 0; - bottom: 0; - background-image: linear-gradient(0deg, transparent 24%, rgba(0, 0, 0, .08) 25%, rgba(0, 0, 0, .08) 26%, transparent 27%, transparent 74%, rgba(0, 0, 0, .08) 75%, rgba(0, 0, 0, .08) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(0, 0, 0, .08) 25%, rgba(0, 0, 0, .08) 26%, transparent 27%, transparent 74%, rgba(0, 0, 0, .08) 75%, rgba(0, 0, 0, .08) 76%, transparent 77%, transparent); - background-size: 50px 50px; -} - -canvas { - width: 100%; - height: 100%; -} - -nav { - position: fixed; - left: 10px; - top: 10px; - width: 100px; -} - -nav button { - border: 2px dashed #bbb; - background: #fff; - border-radius: 5px; - display: block; - width: 100%; - margin-bottom: 10px; - padding: 10px 5px; - font-weight: bold; - cursor: pointer; -} diff --git a/draw/app.js b/draw/app.js deleted file mode 100644 index d8b6ebf..0000000 --- a/draw/app.js +++ /dev/null @@ -1,66 +0,0 @@ -let paintStyle = getComputedStyle(document.querySelector('section')); -let canvas = document.querySelector('canvas'); -let ctx = canvas.getContext('2d'); - -canvas.width = parseInt(paintStyle.getPropertyValue('width')); -canvas.height = parseInt(paintStyle.getPropertyValue('height')); - -var mouse = { - x: 0, - y: 0 -}; - -ctx.lineWidth = 3; -ctx.lineJoin = 'round'; -ctx.lineCap = 'round'; -ctx.strokeStyle = 'limegreen'; - -canvas.addEventListener('mousemove', function(e) { - mouse.x = e.pageX - this.offsetLeft; - mouse.y = e.pageY - this.offsetTop; -}, false); - -canvas.addEventListener('mousedown', function(e) { - ctx.beginPath(); - ctx.moveTo(mouse.x, mouse.y); - canvas.addEventListener('mousemove', onPaint, false); -}, false); - -canvas.addEventListener('mouseup', function() { - canvas.removeEventListener('mousemove', onPaint, false); -}, false); - -var onPaint = function() { - ctx.lineCap = 'round'; - ctx.lineTo(mouse.x, mouse.y); - ctx.stroke(); -}; - - -document.querySelectorAll('nav button').forEach(function(button, idx) { - button.addEventListener('click', function(evt) { - console.log(button.dataset.method); - - switch (button.dataset.method) { - case 'color': - { - ctx.strokeStyle = button.dataset.value; - break; - } - case 'size': - { - ctx.lineWidth = parseInt(button.dataset.value); - break; - } - case 'clear': - { - let clear = confirm('Do you really want to clear canvas?'); - if (clear) { - ctx.clearRect(0, 0, canvas.width, canvas.height); - } - break; - } - } - }); - -}); diff --git a/draw/index.html b/draw/index.html deleted file mode 100644 index 12bead7..0000000 --- a/draw/index.html +++ /dev/null @@ -1,38 +0,0 @@ - - - - - - - - Draw - - - - - -
- -
- - - - - - - - diff --git a/tools/draw/app.css b/tools/draw/app.css new file mode 100644 index 0000000..40e4838 --- /dev/null +++ b/tools/draw/app.css @@ -0,0 +1,58 @@ +@charset "utf-8"; + +* { + box-sizing: border-box; + background-color: transparent; + margin: 0; + padding: 0; + border: 0; + list-style-type: none; + outline: none; + text-decoration: none; + position: relative; + box-shadow: none; + -moz-osx-font-smoothing: grayscale !important; + text-rendering: optimizeLegibility !important; + -webkit-font-smoothing: antialiased !important; + font-family: Arial, Helvetica, sans-serif; +} + +body { + margin: 0; + padding: 0; + font-size: 13px; +} + +section { + position: fixed; + left: 0; + top: 0; + right: 0; + bottom: 0; + background-image: linear-gradient(0deg, transparent 24%, rgba(0, 0, 0, .08) 25%, rgba(0, 0, 0, .08) 26%, transparent 27%, transparent 74%, rgba(0, 0, 0, .08) 75%, rgba(0, 0, 0, .08) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(0, 0, 0, .08) 25%, rgba(0, 0, 0, .08) 26%, transparent 27%, transparent 74%, rgba(0, 0, 0, .08) 75%, rgba(0, 0, 0, .08) 76%, transparent 77%, transparent); + background-size: 50px 50px; +} + +canvas { + width: 100%; + height: 100%; +} + +nav { + position: fixed; + left: 10px; + top: 10px; + width: 100px; +} + +nav button { + border: 2px dashed #bbb; + background: #fff; + border-radius: 5px; + display: block; + width: 100%; + margin-bottom: 10px; + padding: 10px 5px; + font-weight: bold; + cursor: pointer; +} diff --git a/tools/draw/app.js b/tools/draw/app.js new file mode 100644 index 0000000..d8b6ebf --- /dev/null +++ b/tools/draw/app.js @@ -0,0 +1,66 @@ +let paintStyle = getComputedStyle(document.querySelector('section')); +let canvas = document.querySelector('canvas'); +let ctx = canvas.getContext('2d'); + +canvas.width = parseInt(paintStyle.getPropertyValue('width')); +canvas.height = parseInt(paintStyle.getPropertyValue('height')); + +var mouse = { + x: 0, + y: 0 +}; + +ctx.lineWidth = 3; +ctx.lineJoin = 'round'; +ctx.lineCap = 'round'; +ctx.strokeStyle = 'limegreen'; + +canvas.addEventListener('mousemove', function(e) { + mouse.x = e.pageX - this.offsetLeft; + mouse.y = e.pageY - this.offsetTop; +}, false); + +canvas.addEventListener('mousedown', function(e) { + ctx.beginPath(); + ctx.moveTo(mouse.x, mouse.y); + canvas.addEventListener('mousemove', onPaint, false); +}, false); + +canvas.addEventListener('mouseup', function() { + canvas.removeEventListener('mousemove', onPaint, false); +}, false); + +var onPaint = function() { + ctx.lineCap = 'round'; + ctx.lineTo(mouse.x, mouse.y); + ctx.stroke(); +}; + + +document.querySelectorAll('nav button').forEach(function(button, idx) { + button.addEventListener('click', function(evt) { + console.log(button.dataset.method); + + switch (button.dataset.method) { + case 'color': + { + ctx.strokeStyle = button.dataset.value; + break; + } + case 'size': + { + ctx.lineWidth = parseInt(button.dataset.value); + break; + } + case 'clear': + { + let clear = confirm('Do you really want to clear canvas?'); + if (clear) { + ctx.clearRect(0, 0, canvas.width, canvas.height); + } + break; + } + } + }); + +}); diff --git a/tools/draw/index.html b/tools/draw/index.html new file mode 100644 index 0000000..12bead7 --- /dev/null +++ b/tools/draw/index.html @@ -0,0 +1,38 @@ + + + + + + + + Draw + + + + + +
+ +
+ + + + + + + + -- cgit v1.2.3