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

Progress on guides.

Browse Source
This commit is contained in:
Devine Lu Linvega 2016-11-12 15:01:43 -08:00
parent 744e660c98
commit 80465dd71b
10 changed files with 119 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
index.html
View File

@ -2,17 +2,22 @@
<head> <head>
<link rel="stylesheet" type="text/css" href="links/main.css"/> <link rel="stylesheet" type="text/css" href="links/main.css"/>
<script type="text/javascript" src="scripts/position.js"></script> <script type="text/javascript" src="scripts/position.js"></script>
<script type="text/javascript" src="scripts/rect.js"></script>
<script type="text/javascript" src="scripts/color.js"></script> <script type="text/javascript" src="scripts/color.js"></script>
<script type="text/javascript" src="scripts/pointer.js"></script> <script type="text/javascript" src="scripts/pointer.js"></script>
<script type="text/javascript" src="scripts/brush.js"></script> <script type="text/javascript" src="scripts/brush.js"></script>
<script type="text/javascript" src="scripts/keyboard.js"></script> <script type="text/javascript" src="scripts/keyboard.js"></script>
<script type="text/javascript" src="scripts/commander.js"></script> <script type="text/javascript" src="scripts/commander.js"></script>
<script type="text/javascript" src="scripts/guide.js"></script>
<script type="text/javascript" src="scripts/ronin.js"></script> <script type="text/javascript" src="scripts/ronin.js"></script>
</head> </head>
<body> <body>
<canvas id="myCanvas" width="1280" height="800" style="background:#efefef"></canvas> <div id='ronin'>
<div id ='commander'> <canvas id='guides' width="1280" height="800"></canvas>
<input id='commander_input'/> <canvas id="myCanvas" width="1280" height="800" style="background:#efefef"></canvas>
<div id ='commander'>
<input id='commander_input'/>
</div>
</div> </div>
<script type="text/javascript" src="scripts/main.js"></script> <script type="text/javascript" src="scripts/main.js"></script>
</body> </body>

4
links/main.css
View File

@ -2,7 +2,9 @@ body { margin:0px; padding:0px; overflow:hidden;}
canvas:hover { cursor: crosshair;} canvas:hover { cursor: crosshair;}
#guides { position:fixed; z-index:1000;}
#commander { display:none; } #commander { display:none; }
#commander.visible { display:block; } #commander.visible { display:block; }
#commander.hidden { display:none; } #commander.hidden { display:none; }
#commander input { background:black; padding:15px; position:fixed; bottom:0; color:white; left:0; border:0; width:calc(100vw); font-family:courier; cursor:pointer; display:block;} #commander input { background:black; padding:15px; position:fixed; bottom:0; color:white; left:0; border:0; width:calc(100vw); font-family:courier; cursor:pointer; display:block;}

22
scripts/commander.js
View File

@ -20,30 +20,30 @@ function Commander(element,element_input)
var parts = this.element_input.value.split(" "); var parts = this.element_input.value.split(" ");
// Canvas // Canvas
if(parts[0] == ":@"){ if(parts[0] == "@"){
canvas.setAttribute('width',parts[1]+"px"); canvas.setAttribute('width',parts[1]+"px");
canvas.setAttribute('height',parts[2]+"px"); canvas.setAttribute('height',parts[2]+"px");
} }
// Brush // Brush
if(parts[0] == ":+"){ if(parts[0] == "+"){
parts.shift(); parts.shift();
brush.add(parts); brush.add(parts);
} }
if(parts[0] == ":-"){ if(parts[0] == "-"){
parts.shift(); parts.shift();
brush.remove(parts); brush.remove(parts);
} }
// Save // Save
if(parts[0] == ":$"){ if(parts[0] == "$"){
var d=canvas.toDataURL("image/png"); var d=canvas.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>"+parts[1]+"</title><img src='"+d+"' alt='from canvas'/>"); w.document.write("<title>"+parts[1]+"</title><img src='"+d+"' alt='from canvas'/>");
} }
// Load // Load
if(parts[0] == ":/"){ if(parts[0] == "/"){
base_image = new Image(); base_image = new Image();
base_image.src = 'img/base.png'; base_image.src = 'img/base.png';
base_image.onload = function(){ base_image.onload = function(){
@ -52,8 +52,9 @@ function Commander(element,element_input)
} }
// Guides // Guides
if(parts[0] == ":|"){ if(parts[0] == "|"){
console.log("!!"); parts.shift();
ronin.add_guide(parts);
} }
this.hide(); this.hide();
} }
@ -63,12 +64,13 @@ function Commander(element,element_input)
var parts = this.element_input.value.split(" "); var parts = this.element_input.value.split(" ");
// Guides // Guides
if(parts[0] == ":|"){ if(parts[0] == "|"){
console.log("!!"); parts.shift();
ronin.guide(parts);
} }
// Draw // Draw
if(parts[0] == ":/"){ if(parts[0] == "/"){
base_image = new Image(); base_image = new Image();
base_image.src = 'img/base.png'; base_image.src = 'img/base.png';
base_image.onload = function(){ base_image.onload = function(){

36
scripts/guide.js Normal file
View File

@ -0,0 +1,36 @@
function Guide(position,rect)
{
this.position = position;
this.rect = rect;
this.draw = function(context)
{
context.beginPath();
if(this.position.x > 0 && this.position.y === 0){
context.moveTo(this.position.x,0);
context.lineTo(this.position.x,canvas.height);
}
else if(this.position.x === 0 && this.position.y > 0){
context.moveTo(0,this.position.y);
context.lineTo(canvas.width,this.position.y);
}
else if(this.position.x > 0 && this.position.y > 0 && this.rect.w > 0 && this.rect.h > 0){
context.moveTo(this.position.x,0);
context.lineTo(this.position.x,200);
context.lineTo(x + w,y);
context.lineTo(x + w,y + h);
context.lineTo(x,y + h);
context.lineTo(x,y);
}
else{
console.log(this.position);
}
context.lineCap="round";
context.lineWidth = 1;
context.strokeStyle = "rgba(255,0,0,1)";
context.stroke();
context.closePath();
}
}

4
scripts/keyboard.js
View File

@ -18,8 +18,6 @@ function Keyboard()
{ {
if(this.is_locked === true){ return; } if(this.is_locked === true){ return; }
commander.passive();
switch (event.keyCode) switch (event.keyCode)
{ {
case 9: this.key_tab(); break; case 9: this.key_tab(); break;
@ -32,6 +30,8 @@ function Keyboard()
case 186: this.key_colon(); break; case 186: this.key_colon(); break;
case 27: this.key_escape(); break; case 27: this.key_escape(); break;
} }
commander.passive();
}; };
this.key_tab = function() this.key_tab = function()

11
scripts/main.js
View File

@ -1,4 +1,7 @@
var ronin = new Ronin(); var ronin = new Ronin();
ronin.element = document.getElementById('ronin');
ronin.guides_element = document.getElementById('guides');
ronin.guides_context = ronin.guides_element.getContext('2d');
var canvas = document.getElementById('myCanvas'); var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d'); var context = canvas.getContext('2d');
@ -6,21 +9,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"));
canvas.addEventListener('mousemove', function(e) { document.addEventListener('mousemove', function(e) {
brush.draw(e); brush.draw(e);
}, false); }, false);
canvas.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);
canvas.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.onkeydown = function myFunction(){ keyboard.listen(event); }; document.onkeyup = function myFunction(){ keyboard.listen(event); };
/* brush experiments /* brush experiments

1
scripts/pointer.js
View File

@ -16,6 +16,7 @@ function Pointer(offset = new Position(), color = new Color('000000'))
context.lineWidth = this.thickness(); context.lineWidth = this.thickness();
context.strokeStyle = "rgba("+this.color.rgb().r+","+this.color.rgb().g+","+this.color.rgb().b+","+1+")"; context.strokeStyle = "rgba("+this.color.rgb().r+","+this.color.rgb().g+","+this.color.rgb().b+","+1+")";
context.stroke(); context.stroke();
context.closePath();
this.position_prev = this.position(); this.position_prev = this.position();
} }

4
scripts/position.js
View File

@ -1,7 +1,7 @@
function Position(x = 0,y = 0) function Position(x = 0,y = 0)
{ {
this.x = x; this.x = parseFloat(x);
this.y = y; this.y = parseFloat(y);
this.is_equal = function(target) this.is_equal = function(target)
{ {

5
scripts/rect.js Normal file
View File

@ -0,0 +1,5 @@
function Rect(w = 0,h = 0)
{
this.w = parseFloat(w);
this.h = parseFloat(h);
}

43
scripts/ronin.js
View File

@ -1,3 +1,46 @@
function Ronin() function Ronin()
{ {
this.element = null;
this.guides_element = null;
this.guides_context = null;
this.guides = [];
this.draw_guides = function()
{
this.guides_context.clearRect(0, 0, canvas.width, canvas.height);
for (i = 0; i < this.guides.length; i++) {
this.guides[i].draw(this.guides_context);
}
}
this.guide = function(p)
{
return ;
// guides_context = document.getElementById('guides').getContext('2d');
// guides_context.clearRect(0, 0, canvas.width, canvas.height);
var x = p[0] ? p[0] : 0 ;
var y = p[1] ? p[1] : 0 ;
var w = p[2] ? p[2] : 0 ;
var h = p[3] ? p[3] : 0 ;
var g = new Guide(new Position(x,y), new Rect(w,h));
g.draw(guides_context);
}
this.add_guide = function(p)
{
var x = p[0] ? p[0] : 0 ;
var y = p[1] ? p[1] : 0 ;
var w = p[2] ? p[2] : 0 ;
var h = p[3] ? p[3] : 0 ;
var g = new Guide(new Position(x,y), new Rect(w,h));
this.guides.push(g);
this.draw_guides();
}
} }