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>
<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/rect.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/brush.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/guide.js"></script>
<script type="text/javascript" src="scripts/ronin.js"></script>
</head>
<body>
<canvas id="myCanvas" width="1280" height="800" style="background:#efefef"></canvas>
<div id ='commander'>
<input id='commander_input'/>
<div id='ronin'>
<canvas id='guides' width="1280" height="800"></canvas>
<canvas id="myCanvas" width="1280" height="800" style="background:#efefef"></canvas>
<div id ='commander'>
<input id='commander_input'/>
</div>
</div>
<script type="text/javascript" src="scripts/main.js"></script>
</body>

4
links/main.css
View File

@ -2,7 +2,9 @@ body { margin:0px; padding:0px; overflow:hidden;}
canvas:hover { cursor: crosshair;}
#guides { position:fixed; z-index:1000;}
#commander { display:none; }
#commander.visible { display:block; }
#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(" ");
// Canvas
if(parts[0] == ":@"){
if(parts[0] == "@"){
canvas.setAttribute('width',parts[1]+"px");
canvas.setAttribute('height',parts[2]+"px");
}
// Brush
if(parts[0] == ":+"){
if(parts[0] == "+"){
parts.shift();
brush.add(parts);
}
if(parts[0] == ":-"){
if(parts[0] == "-"){
parts.shift();
brush.remove(parts);
}
// Save
if(parts[0] == ":$"){
if(parts[0] == "$"){
var d=canvas.toDataURL("image/png");
var w=window.open('about:blank','image from canvas');
w.document.write("<title>"+parts[1]+"</title><img src='"+d+"' alt='from canvas'/>");
}
// Load
if(parts[0] == ":/"){
if(parts[0] == "/"){
base_image = new Image();
base_image.src = 'img/base.png';
base_image.onload = function(){
@ -52,8 +52,9 @@ function Commander(element,element_input)
}
// Guides
if(parts[0] == ":|"){
console.log("!!");
if(parts[0] == "|"){
parts.shift();
ronin.add_guide(parts);
}
this.hide();
}
@ -63,12 +64,13 @@ function Commander(element,element_input)
var parts = this.element_input.value.split(" ");
// Guides
if(parts[0] == ":|"){
console.log("!!");
if(parts[0] == "|"){
parts.shift();
ronin.guide(parts);
}
// Draw
if(parts[0] == ":/"){
if(parts[0] == "/"){
base_image = new Image();
base_image.src = 'img/base.png';
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; }
commander.passive();
switch (event.keyCode)
{
case 9: this.key_tab(); break;
@ -32,6 +30,8 @@ function Keyboard()
case 186: this.key_colon(); break;
case 27: this.key_escape(); break;
}
commander.passive();
};
this.key_tab = function()

11
scripts/main.js
View File

@ -1,4 +1,7 @@
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 context = canvas.getContext('2d');
@ -6,21 +9,21 @@ var brush = new Brush();
var commander = new Commander(document.getElementById("commander"),document.getElementById("commander_input"));
canvas.addEventListener('mousemove', function(e) {
document.addEventListener('mousemove', function(e) {
brush.draw(e);
}, false);
canvas.addEventListener('mousedown', function(e) {
document.addEventListener('mousedown', function(e) {
if(e.which != 1){ return; }
brush.draw_start(e);
}, false);
canvas.addEventListener('mouseup', function(e) {
document.addEventListener('mouseup', function(e) {
brush.draw_stop(e);
}, false);
var keyboard = new Keyboard();
document.onkeydown = function myFunction(){ keyboard.listen(event); };
document.onkeyup = function myFunction(){ keyboard.listen(event); };
/* 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.strokeStyle = "rgba("+this.color.rgb().r+","+this.color.rgb().g+","+this.color.rgb().b+","+1+")";
context.stroke();
context.closePath();
this.position_prev = this.position();
}

4
scripts/position.js
View File

@ -1,7 +1,7 @@
function Position(x = 0,y = 0)
{
this.x = x;
this.y = y;
this.x = parseFloat(x);
this.y = parseFloat(y);
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()
{
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();
}
}