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