Starting to build save/load and guides.
This commit is contained in:
parent
4ecae8366a
commit
744e660c98
23
_notes.txt
23
_notes.txt
@ -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
|
||||||
|
@ -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>
|
||||||
|
@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
@ -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);
|
||||||
|
@ -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
3
scripts/ronin.js
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
function Ronin()
|
||||||
|
{
|
||||||
|
}
|
Loading…
x
Reference in New Issue
Block a user