From d4e197f08e608bc2533e3998a78781f1f0e437eb Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Thu, 10 May 2018 09:18:30 +1200 Subject: [PATCH] The guide layer now draws the paths --- desktop/sources/scripts/dotgrid.js | 3 +- desktop/sources/scripts/guide.js | 54 +++++++++++++++++++++++++----- desktop/sources/scripts/tool.js | 20 +++++++++++ 3 files changed, 67 insertions(+), 10 deletions(-) diff --git a/desktop/sources/scripts/dotgrid.js b/desktop/sources/scripts/dotgrid.js index 020b2d8..e6eccfb 100644 --- a/desktop/sources/scripts/dotgrid.js +++ b/desktop/sources/scripts/dotgrid.js @@ -43,7 +43,8 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) this.svg_el.style.height = this.tool.settings.size.height; this.svg_el.style.fill = "none"; this.svg_el.style.strokeWidth = this.tool.style().thickness; - this.element.appendChild(this.svg_el); + // this.element.appendChild(this.svg_el); + // Preview this.preview_el = document.createElementNS("http://www.w3.org/2000/svg", "svg"); this.preview_el.id = "preview" diff --git a/desktop/sources/scripts/guide.js b/desktop/sources/scripts/guide.js index d372179..6f53d85 100644 --- a/desktop/sources/scripts/guide.js +++ b/desktop/sources/scripts/guide.js @@ -7,6 +7,8 @@ function Guide() this.el.style.width = "320px"; this.el.style.height = "320px"; + var scale = 2; + this.start = function() { this.clear(); @@ -21,8 +23,8 @@ function Guide() this.resize = function(size) { var offset = 30 - this.el.width = (size.width+offset)*2; - this.el.height = (size.height+offset)*2; + this.el.width = (size.width+offset)*scale; + this.el.height = (size.height+offset)*scale; this.el.style.width = (size.width+offset)+"px"; this.el.style.height = (size.height+offset)+"px"; @@ -31,7 +33,7 @@ function Guide() this.clear = function() { - this.el.getContext('2d').clearRect(0, 0, this.el.width*2, this.el.height*2); + this.el.getContext('2d').clearRect(0, 0, this.el.width*scale, this.el.height*scale); } this.refresh = function() @@ -63,6 +65,17 @@ function Guide() } } + this.draw_paths() + + // Vertices + for(segment_id in dotgrid.tool.layer()){ + var segment = dotgrid.tool.layer()[segment_id]; + for(vertex_id in segment.vertices){ + var vertex = segment.vertices[vertex_id]; + this.draw_vertex(vertex,3); + } + } + // Translations if(dotgrid.cursor.translation){ this.draw_translation(); @@ -77,7 +90,7 @@ function Guide() var ctx = this.el.getContext('2d'); ctx.beginPath(); ctx.lineWidth = 2; - ctx.arc((pos.x * 2)+30, (pos.y * 2)+30, radius, 0, 2 * Math.PI, false); + ctx.arc((pos.x * scale)+30, (pos.y * scale)+30, radius, 0, 2 * Math.PI, false); ctx.fillStyle = dotgrid.theme.active.f_med; ctx.fill(); ctx.closePath(); @@ -88,19 +101,42 @@ function Guide() var ctx = this.el.getContext('2d'); ctx.beginPath(); ctx.lineWidth = 2; - ctx.arc(pos.x * 2, pos.y * 2, radius, 0, 2 * Math.PI, false); + ctx.arc(pos.x * scale, pos.y * scale, radius, 0, 2 * Math.PI, false); ctx.fillStyle = step ? dotgrid.theme.active.f_med : dotgrid.theme.active.f_low; ctx.fill(); ctx.closePath(); } + this.draw_paths = function() + { + var paths = dotgrid.tool.paths_mod({x:15,y:15},scale) + this.draw_path(paths,0) + } + + this.draw_path = function(paths,id) + { + var style = dotgrid.tool.styles[id] + var ctx = this.el.getContext('2d'); + var p = new Path2D(paths[id]); + + ctx.strokeStyle = style.color; + ctx.lineWidth = style.thickness * scale; + ctx.lineCap = style.strokeLinecap; + ctx.lineJoin = style.strokeLinejoin; + if(style.fill && style.fill != "none"){ + ctx.fillStyle = style.color + ctx.fill(p); + } + ctx.stroke(p); + } + this.draw_handle = function(pos,radius = 15) { var ctx = this.el.getContext('2d'); ctx.beginPath(); ctx.lineWidth = 3; ctx.lineCap="round"; - ctx.arc((pos.x * 2)+30, (pos.y * 2)+30, radius, 0, 2 * Math.PI, false); + ctx.arc((pos.x * scale)+30, (pos.y * scale)+30, radius, 0, 2 * Math.PI, false); ctx.strokeStyle = pos_is_equal(pos,dotgrid.cursor.pos) ? dotgrid.theme.active.b_inv : dotgrid.theme.active.f_low; ctx.stroke(); ctx.closePath(); @@ -115,8 +151,8 @@ function Guide() if(to.x<=0) { ctx.beginPath(); - ctx.moveTo((from.x * -2)+30,(from.y * 2)+30); - ctx.lineTo((to.x * -2)+30,(to.y * 2)+30); + ctx.moveTo((from.x * -scale)+30,(from.y * scale)+30); + ctx.lineTo((to.x * -scale)+30,(to.y * scale)+30); ctx.lineCap="round"; ctx.lineWidth = 5; ctx.strokeStyle = dotgrid.theme.active.b_inv; @@ -131,7 +167,7 @@ function Guide() ctx.beginPath(); ctx.lineWidth = 3; ctx.lineCap="round"; - ctx.arc(Math.abs(pos.x * -2)+30, Math.abs(pos.y * 2)+30, radius, 0, 2 * Math.PI, false); + ctx.arc(Math.abs(pos.x * -scale)+30, Math.abs(pos.y * scale)+30, radius, 0, 2 * Math.PI, false); ctx.strokeStyle = dotgrid.theme.active.f_med; ctx.stroke(); ctx.closePath(); diff --git a/desktop/sources/scripts/tool.js b/desktop/sources/scripts/tool.js index 77fe7c5..53f0f2a 100644 --- a/desktop/sources/scripts/tool.js +++ b/desktop/sources/scripts/tool.js @@ -234,6 +234,26 @@ function Tool() return [this.path(0),this.path(1),this.path(2)] } + this.paths_mod = function(offset,scale) // Returns modded paths + { + var a = [] + var layers = copy(this.layers) + for(id in layers){ + var layer = layers[id]; + for(k1 in layer){ + var seg = layer[k1]; + for(k2 in seg.vertices){ + seg.vertices[k2].x += offset.x + seg.vertices[k2].x *= scale + seg.vertices[k2].y += offset.y + seg.vertices[k2].y *= scale + } + } + a.push(this.path(id,layer)) + } + return a + } + this.render = function(segment, angle = 0, mirror_x = false, mirror_y = false) { var type = segment.type;