Starting to build save/load and guides.

This commit is contained in:
Devine Lu Linvega 2016-11-12 12:33:22 -08:00
parent 4ecae8366a
commit 744e660c98
6 changed files with 63 additions and 12 deletions

View File

@ -12,7 +12,7 @@
Layers Layers
# 1 # 1
> Next Layer >
< Prev Laye < Prev Laye
Files Files
@ -20,13 +20,24 @@ $ new_name.jpg
/ file_name.jpg / file_name.jpg
Brushes Brushes
+ 10 0 + 10 0 ff00000 s10
- 10 0 - 10 0
Cursors Cursors
= 10 = 10 ; Set cursors to 10
] += 1 ] += 1 ; Increase cursors by 1
[ -= 1 [ -= 1 ; Decrease cursors by 1
Formatting Formatting
; Split into multiple commands ; ; Split into multiple commands
Guides
| 10 10 100 100 ; Draw a guide
Zoom
Eraser
Right click should not draw

View File

@ -7,6 +7,7 @@
<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/ronin.js"></script>
</head> </head>
<body> <body>
<canvas id="myCanvas" width="1280" height="800" style="background:#efefef"></canvas> <canvas id="myCanvas" width="1280" height="800" style="background:#efefef"></canvas>

View File

@ -21,8 +21,8 @@ function Commander(element,element_input)
// Canvas // Canvas
if(parts[0] == ":@"){ if(parts[0] == ":@"){
canvas.style.width = parts[1]+"px"; canvas.setAttribute('width',parts[1]+"px");
canvas.style.height = parts[2]+"px"; canvas.setAttribute('height',parts[2]+"px");
} }
// Brush // Brush
@ -35,10 +35,45 @@ function Commander(element,element_input)
brush.remove(parts); brush.remove(parts);
} }
// Save
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] == ":/"){
base_image = new Image();
base_image.src = 'img/base.png';
base_image.onload = function(){
context.drawImage(base_image, 100, 100);
}
}
// Guides
if(parts[0] == ":|"){
console.log("!!");
}
this.hide(); this.hide();
} }
this.passive = function() this.passive = function()
{ {
var parts = this.element_input.value.split(" ");
// Guides
if(parts[0] == ":|"){
console.log("!!");
}
// Draw
if(parts[0] == ":/"){
base_image = new Image();
base_image.src = 'img/base.png';
base_image.onload = function(){
context.drawImage(base_image, 100, 100);
}
}
} }
} }

View File

@ -1,3 +1,4 @@
var ronin = new Ronin();
var canvas = document.getElementById('myCanvas'); var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d'); var context = canvas.getContext('2d');
@ -10,6 +11,7 @@ canvas.addEventListener('mousemove', function(e) {
}, false); }, false);
canvas.addEventListener('mousedown', function(e) { canvas.addEventListener('mousedown', function(e) {
if(e.which != 1){ return; }
brush.draw_start(e); brush.draw_start(e);
}, false); }, false);
@ -20,13 +22,12 @@ canvas.addEventListener('mouseup', function(e) {
var keyboard = new Keyboard(); var keyboard = new Keyboard();
document.onkeydown = function myFunction(){ keyboard.listen(event); }; document.onkeydown = function myFunction(){ keyboard.listen(event); };
/* brush experiments
var mirror_test = new Pointer(); var mirror_test = new Pointer();
mirror_test.mirror = new Position(200,10); mirror_test.mirror = new Position(200,10);
brush.add_pointer(mirror_test); brush.add_pointer(mirror_test);
/* brush experiments
var mirror_test2 = new Pointer(new Position(0,10)); var mirror_test2 = new Pointer(new Position(0,10));
mirror_test2.mirror = new Position(200,0); mirror_test2.mirror = new Position(200,0);
brush.add_pointer(mirror_test2); brush.add_pointer(mirror_test2);

View File

@ -23,7 +23,7 @@ function Pointer(offset = new Position(), color = new Color('000000'))
this.thickness = function() this.thickness = function()
{ {
var v = 100 - ((this.position().distance_to(this.position_prev))); var v = 100 - ((this.position().distance_to(this.position_prev)));
var t = v/20; var t = v/40;
return t < 1 ? 1 : t; return t < 1 ? 1 : t;
} }

3
scripts/ronin.js Normal file
View File

@ -0,0 +1,3 @@
function Ronin()
{
}