Minor cleanup.

This commit is contained in:
Devine Lu Linvega 2016-11-14 21:32:19 -08:00
parent 7dbfbd748f
commit 58ce66d4dc
8 changed files with 33 additions and 42 deletions

View File

@ -23,7 +23,7 @@
<body> <body>
<div id='ronin'> <div id='ronin'>
<canvas id='overlay' width="1280" height="800"></canvas> <canvas id='overlay' width="1280" height="800"></canvas>
<canvas id="myCanvas" width="1280" height="800" style="background:#efefef"></canvas> <canvas id="workspace" width="1280" height="800" style="background:#efefef"></canvas>
<div id ='commander'> <div id ='commander'>
<div id='commander_hint'>Hey</div> <div id='commander_hint'>Hey</div>
<input id='commander_input'/> <input id='commander_input'/>

View File

@ -86,6 +86,9 @@ function Commander(element,element_input)
ronin.zoom.passive(this.cmd); ronin.zoom.passive(this.cmd);
ronin.module = ronin.zoom; ronin.module = ronin.zoom;
break; break;
case "$":
ronin.module = ronin.file;
break;
case ":": case ":":
ronin.filter.passive(this.cmd); ronin.filter.passive(this.cmd);
ronin.module = ronin.filter; ronin.module = ronin.filter;

View File

@ -1,31 +1,20 @@
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d'); // Juchecore
var ronin = new Ronin(); var ronin = new Ronin();
ronin.canvas.element = canvas; ronin.canvas.element = document.getElementById('workspace');
ronin.overlay.element = document.getElementById('overlay'); ronin.overlay.element = document.getElementById('overlay');
ronin.overlay.context().imageSmoothingEnabled = false;
ronin.hint.element = document.getElementById('commander_hint'); ronin.hint.element = document.getElementById('commander_hint');
ronin.element = document.getElementById('ronin');
var commander = new Commander(document.getElementById("commander"),document.getElementById("commander_input")); var commander = new Commander(document.getElementById("commander"),document.getElementById("commander_input"));
document.addEventListener('mousemove', function(e) { // Interactive
ronin.brush.draw(e);
}, false);
document.addEventListener('mousedown', function(e) { document.addEventListener('mousemove', function(e) { ronin.brush.draw(e); }, false);
if(e.which != 1){ return; } document.addEventListener('mousedown', function(e) { if(e.which != 1){ return; } ronin.brush.draw_start(e); }, false);
ronin.brush.draw_start(e); document.addEventListener('mouseup', function(e) { ronin.brush.draw_stop(e); }, false);
}, false);
document.addEventListener('mouseup', function(e) {
ronin.brush.draw_stop(e);
}, false);
var keyboard = new Keyboard(); var keyboard = new Keyboard();
document.onkeyup = function myFunction(){ keyboard.listen(event); }; document.onkeyup = function myFunction(){ keyboard.listen(event); };
// Done.

View File

@ -17,21 +17,21 @@ function Pointer(offset = new Position(), color = new Color('000000'))
position.y += (Math.random() * this.noise) - (this.noise/2); position.y += (Math.random() * this.noise) - (this.noise/2);
} }
context.beginPath(); ronin.canvas.context().beginPath();
context.moveTo(this.position_prev.x,this.position_prev.y); ronin.canvas.context().moveTo(this.position_prev.x,this.position_prev.y);
context.lineTo(position.x,position.y); ronin.canvas.context().lineTo(position.x,position.y);
context.lineCap="round"; ronin.canvas.context().lineCap="round";
context.lineWidth = this.thickness(); ronin.canvas.context().lineWidth = this.thickness();
context.strokeStyle = ronin.brush.color.rgba(); ronin.canvas.context().strokeStyle = ronin.brush.color.rgba();
context.stroke(); ronin.canvas.context().stroke();
context.closePath(); ronin.canvas.context().closePath();
this.position_prev = position; this.position_prev = position;
} }
this.erase = function() this.erase = function()
{ {
context.clearRect(this.position().x - (ronin.brush.size/2), this.position().y - (ronin.brush.size/2), ronin.brush.size, ronin.brush.size); ronin.canvas.context().clearRect(this.position().x - (ronin.brush.size/2), this.position().y - (ronin.brush.size/2), ronin.brush.size, ronin.brush.size);
} }
this.thickness = function() this.thickness = function()

View File

@ -6,7 +6,7 @@ function Canvas(element)
this.active = function(cmd) this.active = function(cmd)
{ {
if(cmd.bang()){ this.context().clearRect(0, 0, canvas.width, canvas.height); } if(cmd.bang()){ this.context().clearRect(0, 0, this.element.width, this.element.height); }
if(cmd.rect()){ if(cmd.rect()){
this.resize(cmd.rect()); this.resize(cmd.rect());
@ -15,7 +15,7 @@ function Canvas(element)
if(cmd.color()){ if(cmd.color()){
this.context().beginPath(); this.context().beginPath();
this.context().rect(0, 0, canvas.width, canvas.height); this.context().rect(0, 0, this.element.width, this.element.height);
this.context().fillStyle = cmd.color().hex; this.context().fillStyle = cmd.color().hex;
this.context().fill(); this.context().fill();
} }

View File

@ -20,7 +20,7 @@ function File()
base_image.src = cmd.value() && this.storage[cmd.value()] ? this.storage[cmd.value()] : cmd.path(); base_image.src = cmd.value() && this.storage[cmd.value()] ? this.storage[cmd.value()] : cmd.path();
base_image.onload = function(){ base_image.onload = function(){
position.normalize(cmd.rect()); position.normalize(cmd.rect());
context.drawImage(base_image, position.x, position.y, cmd.rect().width, cmd.rect().height); ronin.canvas.context().drawImage(base_image, position.x, position.y, cmd.rect().width, cmd.rect().height);
} }
} }
@ -50,11 +50,11 @@ function File()
this.save = function(cmd) this.save = function(cmd)
{ {
if(cmd.value() > 0){ if(cmd.value() > 0){
this.storage[cmd.value()] = canvas.toDataURL("image/png"); this.storage[cmd.value()] = ronin.canvas.element.toDataURL("image/png");
} }
else{ else{
var d=canvas.toDataURL("image/png"); var d = ronin.canvas.element.toDataURL("image/png");
var w=window.open('about:blank','image from canvas'); var w = window.open('about:blank','image from canvas');
w.document.write("<title>"+(cmd.cmd_array[0] ? cmd.cmd_array[0] : "Untitled")+"</title><img src='"+d+"' alt='from canvas'/>"); w.document.write("<title>"+(cmd.cmd_array[0] ? cmd.cmd_array[0] : "Untitled")+"</title><img src='"+d+"' alt='from canvas'/>");
} }
} }

View File

@ -1,6 +1,5 @@
function Ronin() function Ronin()
{ {
this.element = null;
this.canvas = new Canvas(); this.canvas = new Canvas();
this.overlay = new Overlay(); this.overlay = new Overlay();
this.brush = new Brush(); this.brush = new Brush();

View File

@ -37,13 +37,13 @@ function Overlay(element)
if(rect){ if(rect){
this.draw_rect(position,rect); this.draw_rect(position,rect);
} }
else if(position.x != 0 && position.y != 0){ else if(position.x !== 0 && position.y !== 0){
this.draw_pointer(position); this.draw_pointer(position);
} }
else if(position.x != 0 ){ else if(position.x !== 0 ){
this.draw_vertical_line(position); this.draw_vertical_line(position);
} }
else if(position.y != 0 ){ else if(position.y !== 0 ){
this.draw_horizontal_line(position); this.draw_horizontal_line(position);
} }
} }
@ -142,6 +142,6 @@ function Overlay(element)
this.clear = function() this.clear = function()
{ {
this.context().clearRect(0, 0, canvas.width, canvas.height); this.context().clearRect(0, 0, ronin.canvas.element.width, ronin.canvas.element.height);
} }
} }