Cleaning up the guide

This commit is contained in:
Devine Lu Linvega 2019-01-09 15:01:01 +12:00
parent f604780056
commit cd02c01f0d
4 changed files with 19 additions and 17 deletions

View File

@ -51,6 +51,7 @@ function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) {
this.update = function () {
DOTGRID.resize()
DOTGRID.renderer.update()
DOTGRID.interface.update()
DOTGRID.guide.update()
}

View File

@ -7,6 +7,7 @@ DOTGRID.Guide = function () {
this.el.height = 640
this.el.style.width = '320px'
this.el.style.height = '320px'
this.context = this.el.getContext('2d')
this.showExtras = true
this.scale = 2
@ -17,27 +18,20 @@ DOTGRID.Guide = function () {
}
this.update = function (force = false) {
DOTGRID.renderer.update()
this.clear()
this.el.getContext('2d').restore()
this.context.restore()
this.drawMirror()
this.drawRulers()
DOTGRID.renderer.update()
let ctx = this.el.getContext('2d')
let image64 = DOTGRID.renderer.svg64()
let img = new Image()
img.src = image64
ctx.drawImage(img, 0, 0, this.el.width, this.el.height)
if (DOTGRID.tool.index == 2) { this.drawMarkers(); this.drawVertices() }
// this.drawPath(new Generator(DOTGRID.tool.layers[2], DOTGRID.tool.styles[2]).toString({ x: 0, y: 0 }, this.scale), DOTGRID.tool.styles[2])
if (DOTGRID.tool.index == 1) { this.drawMarkers(); this.drawVertices() }
// this.drawPath(new Generator(DOTGRID.tool.layers[1], DOTGRID.tool.styles[1]).toString({ x: 0, y: 0 }, this.scale), DOTGRID.tool.styles[1])
if (DOTGRID.tool.index == 0) { this.drawMarkers(); this.drawVertices() }
// this.drawPath(new Generator(DOTGRID.tool.layers[0], DOTGRID.tool.styles[0]).toString({ x: 0, y: 0 }, this.scale), DOTGRID.tool.styles[0])
this.drawRender()
this.drawMarkers()
this.drawVertices()
this.drawHandles()
this.drawTranslation()
this.drawCursor()
@ -278,6 +272,12 @@ DOTGRID.Guide = function () {
ctx.restore()
}
this.drawRender = function(ctx = this.context){
let img = new Image()
img.src = DOTGRID.renderer.svg64()
this.context.drawImage(img, 0, 0, this.el.width, this.el.height)
}
function isEqual (a, b) { return a && b && Math.abs(a.x) == Math.abs(b.x) && Math.abs(a.y) == Math.abs(b.y) }
function clamp (v, min, max) { return v < min ? min : v > max ? max : v }
}

View File

@ -38,6 +38,7 @@ DOTGRID.Renderer = function () {
layer.style.strokeLinejoin = style.strokeLinejoin
layer.style.stroke = style.color
layer.style.fill = style.fill
layer.style.transform = style.transform
layer.setAttribute('d', paths[id])
}
}

View File

@ -5,9 +5,9 @@ DOTGRID.Tool = function () {
this.settings = { size: { width: 300, height: 300 } }
this.layers = [[], [], []]
this.styles = [
{ thickness: 10, strokeLinecap: 'round', strokeLinejoin: 'round', color: '#f00', fill: 'none', mirror_style: 0 },
{ thickness: 10, strokeLinecap: 'round', strokeLinejoin: 'round', color: '#0f0', fill: 'none', mirror_style: 0 },
{ thickness: 10, strokeLinecap: 'round', strokeLinejoin: 'round', color: '#00f', fill: 'none', mirror_style: 0 }
{ thickness: 10, strokeLinecap: 'round', strokeLinejoin: 'round', color: '#f00', fill: 'none', mirror_style: 0, transform:'rotate(45)' },
{ thickness: 10, strokeLinecap: 'round', strokeLinejoin: 'round', color: '#0f0', fill: 'none', mirror_style: 0, transform:'rotate(45)' },
{ thickness: 10, strokeLinecap: 'round', strokeLinejoin: 'round', color: '#00f', fill: 'none', mirror_style: 0, transform:'rotate(45)' }
]
this.vertices = []
this.reqs = { line: 2, arc_c: 2, arc_r: 2, arc_c_full: 2, arc_r_full: 2, bezier: 3, close: 0 }