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

5
index.html
View File

@ -2,18 +2,23 @@
<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>
<div id='ronin'>
<canvas id='guides' 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'/>
</div> </div>
</div>
<script type="text/javascript" src="scripts/main.js"></script> <script type="text/javascript" src="scripts/main.js"></script>
</body> </body>
</html> </html>

2
links/main.css
View File

@ -2,6 +2,8 @@ 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; }

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();
}
} }