dakedres/ronin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Migrated guides to the new unit system.

Browse Source
This commit is contained in:
Devine Lu Linvega 2016-11-14 13:34:20 -08:00
parent 4e95ce70b2
commit 5c875e2801
8 changed files with 122 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -20,7 +20,7 @@
</head> </head>
<body> <body>
<div id='ronin'> <div id='ronin'>
<canvas id='guides' 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="myCanvas" width="1280" height="800" style="background:#efefef"></canvas>
<div id ='commander'> <div id ='commander'>
<input id='commander_input'/> <input id='commander_input'/>

2
links/main.css
View File

@ -3,7 +3,7 @@ body { margin:0px; padding:0px; overflow:hidden;}
canvas:hover { cursor: crosshair;} canvas:hover { cursor: crosshair;}
#guides { position:fixed; z-index:1000;} #overlay { position:fixed; z-index:1000;}
#commander { display:none; z-index: 2000; } #commander { display:none; z-index: 2000; }
#commander.visible { display:block; } #commander.visible { display:block; }

2
scripts/brush.js
View File

@ -36,7 +36,7 @@ function Brush()
// Pointers // Pointers
this.pointers = [new Pointer(new Position(0,0))]; this.pointers = [new Pointer(new Position())];
this.add_pointer = function(pointer) this.add_pointer = function(pointer)
{ {

46
scripts/commander.js
View File

@ -26,34 +26,34 @@ function Commander(element,element_input)
ronin.canvas.active(cmd); ronin.canvas.active(cmd);
break; break;
case "~": case "~":
ronin.history.active(params); ronin.history.active(cmd);
break; break;
case "$": case "$":
ronin.save.active(params); ronin.save.active(cmd);
break; break;
case "/": case "/":
ronin.load.active(params); ronin.load.active(cmd);
break; break;
case "&": case "&":
ronin.brush.active(params); ronin.brush.active(cmd);
break; break;
case ">": case ">":
ronin.pointer.active(params); ronin.pointer.active(cmd);
break; break;
case "|": case "|":
ronin.overlay.active(params); ronin.overlay.active(cmd);
break; break;
case "^": case "^":
ronin.translate.active(params); ronin.translate.active(cmd);
break; break;
case "=": case "=":
ronin.zoom.active(params); ronin.zoom.active(cmd);
break; break;
case "#": case "#":
ronin.layers.active(params); ronin.layers.active(cmd);
break; break;
case ":": case ":":
ronin.filter.active(params); ronin.filter.active(cmd);
break; break;
} }
@ -62,14 +62,6 @@ function Commander(element,element_input)
/* /*
var parts = command; var parts = command;
// Canvas
if(parts[0] == "@"){
canvas.setAttribute('width',parts[1]+"px");
canvas.setAttribute('height',parts[2]+"px");
ronin.guides_element.setAttribute('width',parts[1]+"px");
ronin.guides_element.setAttribute('height',parts[2]+"px");
}
// Brush // Brush
if(parts[0] == "&"){ if(parts[0] == "&"){
parts.shift(); parts.shift();
@ -121,31 +113,31 @@ function Commander(element,element_input)
ronin.canvas.passive(cmd); ronin.canvas.passive(cmd);
break; break;
case "~": case "~":
ronin.history.passive(params); ronin.history.passive(cmd);
break; break;
case "/": case "/":
ronin.load.passive(params); ronin.load.passive(cmd);
break; break;
case "&": case "&":
ronin.brush.passive(params); ronin.brush.passive(cmd);
break; break;
case ">": case ">":
ronin.pointer.passive(params); ronin.pointer.passive(cmd);
break; break;
case "|": case "|":
ronin.overlay.passive(params); ronin.overlay.passive(cmd);
break; break;
case "^": case "^":
ronin.translate.passive(params); ronin.translate.passive(cmd);
break; break;
case "=": case "=":
ronin.zoom.passive(params); ronin.zoom.passive(cmd);
break; break;
case "#": case "#":
ronin.layers.passive(params); ronin.layers.passive(cmd);
break; break;
case ":": case ":":
ronin.filter.passive(params); ronin.filter.passive(cmd);
break; break;
} }

15
scripts/main.js
View File

@ -3,7 +3,8 @@ var context = canvas.getContext('2d');
var ronin = new Ronin(); var ronin = new Ronin();
ronin.canvas.element = canvas; ronin.canvas.element = canvas;
ronin.overlay.element = canvas; ronin.overlay.element = document.getElementById('overlay');
ronin.overlay.context().imageSmoothingEnabled = false;
@ -12,11 +13,9 @@ ronin.overlay.element = canvas;
ronin.element = document.getElementById('ronin'); ronin.element = document.getElementById('ronin');
ronin.guides_element = document.getElementById('guides');
ronin.guides_context = ronin.guides_element.getContext('2d');
var brush = new Brush(); // var brush = new Brush();
@ -24,23 +23,21 @@ var brush = new Brush();
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) { document.addEventListener('mousemove', function(e) {
brush.draw(e); // brush.draw(e);
}, false); }, false);
document.addEventListener('mousedown', function(e) { document.addEventListener('mousedown', function(e) {
if(e.which != 1){ return; } if(e.which != 1){ return; }
brush.draw_start(e); // brush.draw_start(e);
}, false); }, false);
document.addEventListener('mouseup', function(e) { document.addEventListener('mouseup', function(e) {
brush.draw_stop(e); // brush.draw_stop(e);
}, false); }, false);
var keyboard = new Keyboard(); var keyboard = new Keyboard();
document.onkeyup = function myFunction(){ keyboard.listen(event); }; document.onkeyup = function myFunction(){ keyboard.listen(event); };
ronin.guides_context.imageSmoothingEnabled= false
/* brush experiments /* brush experiments
var mirror_test = new Pointer(); var mirror_test = new Pointer();

1
scripts/ronin.canvas.js
View File

@ -12,7 +12,6 @@ function Canvas(element)
} }
if(cmd.color()){ if(cmd.color()){
console.log(cmd.color());
this.element.getContext('2d').beginPath(); this.element.getContext('2d').beginPath();
this.element.getContext('2d').rect(0, 0, canvas.width, canvas.height); this.element.getContext('2d').rect(0, 0, canvas.width, canvas.height);
this.element.getContext('2d').fillStyle = cmd.color().hex; this.element.getContext('2d').fillStyle = cmd.color().hex;

96
scripts/ronin.overlay.js
View File

@ -6,8 +6,90 @@ function Overlay(element)
// Module // Module
this.passive = function(p) this.passive = function(cmd)
{ {
this.clear();
if(!cmd.position()){ return; }
if(cmd.rect()){
this.draw_rect(cmd.position(),cmd.rect());
}
else if(cmd.position().x > 0 && cmd.position().y > 0){
this.draw_pointer(cmd.position());
}
else if(cmd.position().x > 0 ){
this.draw_vertical_line(cmd.position());
}
else if(cmd.position().y > 0 ){
this.draw_horizontal_line(cmd.position());
}
}
this.active = function(cmd)
{
}
this.draw_rect = function(position,rect)
{
this.context().beginPath();
this.context().moveTo(position.x,position.y);
this.context().lineTo(position.x + rect.width,position.y);
this.context().lineTo(position.x + rect.width,position.y + rect.height);
this.context().lineTo(position.x,position.y + rect.height);
this.context().lineTo(position.x,position.y);
this.context().lineCap="round";
this.context().lineWidth = 1;
this.context().strokeStyle = "#ff0000";
this.context().stroke();
this.context().closePath();
}
this.draw_pointer = function(position)
{
this.context().beginPath();
this.context().moveTo(position.x,position.y);
this.context().lineTo(position.x + 10,position.y);
this.context().lineTo(position.x,position.y + 10);
this.context().lineTo(position.x,position.y);
this.context().lineCap="round";
this.context().lineWidth = 1;
this.context().strokeStyle = "#ff0000";
this.context().stroke();
this.context().closePath();
}
this.draw_vertical_line = function(position)
{
this.context().beginPath();
this.context().moveTo(position.x,0);
this.context().lineTo(position.x,this.element.height);
this.context().lineCap="round";
this.context().lineWidth = 1;
this.context().strokeStyle = "#ff0000";
this.context().stroke();
this.context().closePath();
}
this.draw_horizontal_line = function(position)
{
this.context().beginPath();
this.context().moveTo(position.x,0);
this.context().lineTo(position.x,this.element.height);
this.context().lineCap="round";
this.context().lineWidth = 1;
this.context().strokeStyle = "#ff0000";
this.context().stroke();
this.context().closePath();
} }
this.resize = function(rect) this.resize = function(rect)
@ -19,7 +101,7 @@ function Overlay(element)
this.show_guide = function(position,rect) this.show_guide = function(position,rect)
{ {
this.clear(); this.clear();
context.beginPath(); this.context().beginPath();
this.context().moveTo(0,0); this.context().moveTo(0,0);
this.context().lineTo(rect.width,0); this.context().lineTo(rect.width,0);
@ -27,11 +109,11 @@ function Overlay(element)
this.context().lineTo(0,rect.height); this.context().lineTo(0,rect.height);
this.context().lineTo(0,0); this.context().lineTo(0,0);
context.lineCap="round"; this.context().lineCap="round";
context.lineWidth = 1; this.context().lineWidth = 1;
context.strokeStyle = "#ff0000"; this.context().strokeStyle = "#ff0000";
context.stroke(); this.context().stroke();
context.closePath(); this.context().closePath();
} }
this.context = function() this.context = function()

8
scripts/unit.position.js
View File

@ -1,7 +1,9 @@
function Position(x = 0,y = 0) function Position(position_str)
{ {
this.x = parseFloat(x); this.position_str = position_str;
this.y = parseFloat(y);
this.x = parseFloat(this.position_str.split(",")[0]);
this.y = parseFloat(this.position_str.split(",")[1]);
this.is_equal = function(target) this.is_equal = function(target)
{ {