Draw

From a217ba8ae93591c5f1881425e9a3f2d6842e92de Mon Sep 17 00:00:00 2001 From: Mitja Felicijan Date: Wed, 19 Sep 2018 01:53:20 +0200 Subject: content update --- tools/draw/app.css | 58 ++++++++++++++++++++++++++++++++++++++++++++ tools/draw/app.js | 66 +++++++++++++++++++++++++++++++++++++++++++++++++++ tools/draw/index.html | 38 +++++++++++++++++++++++++++++ 3 files changed, 162 insertions(+) create mode 100644 tools/draw/app.css create mode 100644 tools/draw/app.js create mode 100644 tools/draw/index.html (limited to 'tools') 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