From cd313b3b52603cd4a422eaccfb37a52a5c1f6fe5 Mon Sep 17 00:00:00 2001 From: "kam (from the studio)" Date: Wed, 25 May 2022 16:40:35 +0200 Subject: [PATCH] drawings wip --- index.html | 42 +++++++++++++++++++++++++++++++++--------- script.js | 19 ++++++++++++++----- style.css | 5 ++++- 3 files changed, 51 insertions(+), 15 deletions(-) diff --git a/index.html b/index.html index 73016af..3fbb068 100644 --- a/index.html +++ b/index.html @@ -25,15 +25,39 @@ xml:space="preserve" > -
-
-
+
+ + + +
+ +
+ + + +
diff --git a/script.js b/script.js index 1eb951d..0c4ebd0 100644 --- a/script.js +++ b/script.js @@ -109,15 +109,24 @@ var updateSvgPath = function () { const presets = document.querySelectorAll(".preset"); for (const preset of presets) { - if (preset.dataset.path) { + let presetPath = preset.querySelector("path"); + if (presetPath) { let offset = preset.getBoundingClientRect(); - let drawing = preset.dataset.path.split(" "); + + let drawing = presetPath.getPathData(); let index = 1; preset.addEventListener("mousemove", (e) => { - strPath += ` ${drawing[index]}`; - index += 1; - path.setAttribute("d", strPath); + if (index < drawing.length) { + let values = drawing[index].values + .map((value, index) => { + return index % 2 == 0 ? value + offset.x : value + offset.y; + }) + .join(" "); + strPath += ` ${drawing[index].type} ${values}`; + index += 1; + path.setAttribute("d", strPath); + } }); } } diff --git a/style.css b/style.css index f6fa53d..ab2c617 100644 --- a/style.css +++ b/style.css @@ -7,7 +7,7 @@ body { } -svg { +#svg-canvas { position: absolute; top: 0; left: 0; @@ -27,3 +27,6 @@ svg { z-index: 100; } +.preset svg { + display: none; +} \ No newline at end of file