diff --git a/_notes.txt b/_notes.txt index b29d138..99e3bfb 100644 --- a/_notes.txt +++ b/_notes.txt @@ -15,6 +15,9 @@ > < Prev Laye + Background +* ff00ff ; Fill background with color + Files $ new_name.jpg / file_name.jpg @@ -41,3 +44,9 @@ $ new_name.jpg Eraser Right click should not draw + + Fill background + + Image + + Eraser \ No newline at end of file diff --git a/media/logo.png b/media/logo.png new file mode 100644 index 0000000..559b4c4 Binary files /dev/null and b/media/logo.png differ diff --git a/scripts/commander.js b/scripts/commander.js index 1dff1a0..e94ead5 100644 --- a/scripts/commander.js +++ b/scripts/commander.js @@ -44,11 +44,14 @@ function Commander(element,element_input) // Load if(parts[0] == "/"){ - base_image = new Image(); - base_image.src = 'img/base.png'; - base_image.onload = function(){ - context.drawImage(base_image, 100, 100); - } + parts.shift(); + ronin.load_image(parts); + } + + // Fill + if(parts[0] == "*"){ + parts.shift(); + ronin.fill(parts); } // Guides @@ -71,11 +74,9 @@ function Commander(element,element_input) // Draw if(parts[0] == "/"){ - base_image = new Image(); - base_image.src = 'img/base.png'; - base_image.onload = function(){ - context.drawImage(base_image, 100, 100); - } + parts.shift(); + parts.shift(); + ronin.guide(parts); } } } \ No newline at end of file diff --git a/scripts/ronin.js b/scripts/ronin.js index ab93990..a16cb1b 100644 --- a/scripts/ronin.js +++ b/scripts/ronin.js @@ -1,10 +1,44 @@ function Ronin() { this.element = null; + + this.load_image = function(p) + { + base_image = new Image(); + base_image.src = p[0]; // media/logo.png + base_image.onload = function(){ + context.drawImage(base_image, parseFloat(p[1]), parseFloat(p[2]), parseFloat(p[3]), parseFloat(p[4])); + } + this.draw_guides(); + } + + this.fill = function(p) + { + cvSave = canvas.toDataURL("image/png"); + + context.beginPath(); + context.rect(0, 0, canvas.width, canvas.height); + context.fillStyle = "#"+p[0]; + context.fill(); + + var imgObj = new Image(); + imgObj.src = cvSave; + + context.drawImage(imgObj,0,0); + } + + // Guides + this.guides_element = null; this.guides_context = null; this.guides = []; + this.clear_guides = function() + { + this.guides = []; + this.draw_guides(); + } + this.draw_guides = function() { this.guides_context.clearRect(0, 0, canvas.width, canvas.height); @@ -17,6 +51,7 @@ function Ronin() this.guide = function(p) { this.guides_context.clearRect(0, 0, canvas.width, canvas.height); + this.draw_guides(); var x = p[0] ? p[0] : 0 ; var y = p[1] ? p[1] : 0 ; @@ -30,6 +65,8 @@ function Ronin() this.add_guide = function(p) { + if(p == "-"){ this.clear_guides(); return; } + var x = p[0] ? p[0] : 0 ; var y = p[1] ? p[1] : 0 ; var w = p[2] ? p[2] : 0 ;