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>
<body>
<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>
<div id ='commander'>
<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;}
#guides { position:fixed; z-index:1000;}
#overlay { position:fixed; z-index:1000;}
#commander { display:none; z-index: 2000; }
#commander.visible { display:block; }

2
scripts/brush.js
View File

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

46
scripts/commander.js
View File

@ -26,34 +26,34 @@ function Commander(element,element_input)
ronin.canvas.active(cmd);
break;
case "~":
ronin.history.active(params);
ronin.history.active(cmd);
break;
case "$":
ronin.save.active(params);
ronin.save.active(cmd);
break;
case "/":
ronin.load.active(params);
ronin.load.active(cmd);
break;
case "&":
ronin.brush.active(params);
ronin.brush.active(cmd);
break;
case ">":
ronin.pointer.active(params);
ronin.pointer.active(cmd);
break;
case "|":
ronin.overlay.active(params);
ronin.overlay.active(cmd);
break;
case "^":
ronin.translate.active(params);
ronin.translate.active(cmd);
break;
case "=":
ronin.zoom.active(params);
ronin.zoom.active(cmd);
break;
case "#":
ronin.layers.active(params);
ronin.layers.active(cmd);
break;
case ":":
ronin.filter.active(params);
ronin.filter.active(cmd);
break;
}
@ -62,14 +62,6 @@ function Commander(element,element_input)
/*
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
if(parts[0] == "&"){
parts.shift();
@ -121,31 +113,31 @@ function Commander(element,element_input)
ronin.canvas.passive(cmd);
break;
case "~":
ronin.history.passive(params);
ronin.history.passive(cmd);
break;
case "/":
ronin.load.passive(params);
ronin.load.passive(cmd);
break;
case "&":
ronin.brush.passive(params);
ronin.brush.passive(cmd);
break;
case ">":
ronin.pointer.passive(params);
ronin.pointer.passive(cmd);
break;
case "|":
ronin.overlay.passive(params);
ronin.overlay.passive(cmd);
break;
case "^":
ronin.translate.passive(params);
ronin.translate.passive(cmd);
break;
case "=":
ronin.zoom.passive(params);
ronin.zoom.passive(cmd);
break;
case "#":
ronin.layers.passive(params);
ronin.layers.passive(cmd);
break;
case ":":
ronin.filter.passive(params);
ronin.filter.passive(cmd);
break;
}

15
scripts/main.js
View File

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

1
scripts/ronin.canvas.js
View File

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

96
scripts/ronin.overlay.js
View File

@ -6,8 +6,90 @@ function Overlay(element)
// 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)
@ -19,7 +101,7 @@ function Overlay(element)
this.show_guide = function(position,rect)
{
this.clear();
context.beginPath();
this.context().beginPath();
this.context().moveTo(0,0);
this.context().lineTo(rect.width,0);
@ -27,11 +109,11 @@ function Overlay(element)
this.context().lineTo(0,rect.height);
this.context().lineTo(0,0);
context.lineCap="round";
context.lineWidth = 1;
context.strokeStyle = "#ff0000";
context.stroke();
context.closePath();
this.context().lineCap="round";
this.context().lineWidth = 1;
this.context().strokeStyle = "#ff0000";
this.context().stroke();
this.context().closePath();
}
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.y = parseFloat(y);
this.position_str = position_str;
this.x = parseFloat(this.position_str.split(",")[0]);
this.y = parseFloat(this.position_str.split(",")[1]);
this.is_equal = function(target)
{