Basic layer support with #
This commit is contained in:
Devine Lu Linvega
parent
5b56a50a0a
commit
25ffb2f736
@ -25,6 +25,7 @@
|
||||
<script type="text/javascript" src="scripts/modules/history.js"></script>
|
||||
<script type="text/javascript" src="scripts/modules/eraser.js"></script>
|
||||
<script type="text/javascript" src="scripts/modules/surface.js"></script>
|
||||
<script type="text/javascript" src="scripts/modules/surface.layer.js"></script>
|
||||
<script type="text/javascript" src="scripts/modules/eye.js"></script>
|
||||
|
||||
<script type="text/javascript" src="scripts/modules/filter.js"></script>
|
||||
@ -51,9 +52,8 @@
|
||||
<div id='ronin'>
|
||||
<div id='surface' style='left:0px;top:0px'>
|
||||
<canvas id='overlay' width="1480" height="800"></canvas>
|
||||
<canvas id="workspace" width="1480" height="800"></canvas>
|
||||
<div id='widget'>Loading..</div>
|
||||
</div>
|
||||
<div id='widget'>Loading..</div>
|
||||
<div id ='commander'>
|
||||
<div id='commander_hint'></div>
|
||||
<input id='commander_input' placeholder='~'/>
|
||||
|
||||
@ -4,9 +4,9 @@ body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_medium"
|
||||
canvas:hover { cursor: crosshair;}
|
||||
|
||||
#ronin { width:100vw; height:100vh; overflow:hidden; background:#000; background-image:url(../media/grid_20.png);}
|
||||
#surface { width:100vw; height:100vh; overflow:hidden; position:fixed; left:0px; top:0px;}
|
||||
#surface { width:100vw; height:100vh; overflow:hidden; position:fixed; left:0px; top:0px; background:#efefef; border-radius:3px;}
|
||||
#surface .layer { position:absolute; top:0px; left:0px; width:100%; height:100%;}
|
||||
#overlay { position:absolute; z-index:1000;}
|
||||
#workspace { position:absolute; background:#efefef; border-radius:3px;}
|
||||
#widget { color:#efefef; position:absolute; font-size:10px; line-height:30px;}
|
||||
#widget .cursor { float:right;}
|
||||
|
||||
@ -16,7 +16,7 @@ canvas:hover { cursor: crosshair;}
|
||||
#commander input { background:black; padding:5px 15px; position:fixed; bottom:0; color:white; font-size:12px; left:0; border:0; width:calc(100vw); cursor:pointer; display:block;}
|
||||
#commander input:before { content:"input"; color:red;}
|
||||
|
||||
#commander_hint { background: black;position: fixed;bottom: 27px;padding: 5px 15px 0 15px;line-height: 17px;font-size: 12px;width: 100vw;color: #999;}
|
||||
#commander_hint { background: black;position: fixed;bottom: 27px;padding: 5px 15px 0 15px;line-height: 17px;font-size: 10px;width: 100vw;color: #999;}
|
||||
#commander_hint .module { color:#ffffff; display:inline-block; margin-right:10px;}
|
||||
#commander_hint .param { font-style: italic;}
|
||||
#commander_hint .param:after { content:", "; }
|
||||
|
||||
@ -12,7 +12,7 @@ commander.hint.element = document.getElementById('commander_hint');
|
||||
document.addEventListener('mousedown', function(e){ ronin.cursor.mouse_down(ronin.position_in_canvas(e));}, false);
|
||||
document.addEventListener('mousemove', function(e){ ronin.cursor.mouse_move(ronin.position_in_canvas(e));}, false);
|
||||
document.addEventListener('mouseup', function(e){ ronin.cursor.mouse_up(ronin.position_in_canvas(e));}, false);
|
||||
document.addEventListener('contextmenu', function(ev){ ev.preventDefault(); return false;}, false);
|
||||
// document.addEventListener('contextmenu', function(ev){ ev.preventDefault(); return false;}, false);
|
||||
|
||||
// Keyboard
|
||||
var keyboard = new Keyboard();
|
||||
@ -25,8 +25,6 @@ starting_canvas.width = window.innerWidth - 200;
|
||||
starting_canvas.height = window.innerHeight - 200;
|
||||
|
||||
commander.query("~ "+ronin.timestamp());
|
||||
commander.query("@ "+starting_canvas.render());
|
||||
commander.query("> 1 0,0 #000000");
|
||||
commander.query("> banking=true");
|
||||
commander.query("> natural=true");
|
||||
commander.query("> -5,0");
|
||||
commander.query("# "+starting_canvas.render());
|
||||
commander.query("# layer=main");
|
||||
commander.query("> 1 0,0 #000000");
|
||||
@ -38,8 +38,8 @@ function Ronin()
|
||||
|
||||
this.position_in_canvas = function(e)
|
||||
{
|
||||
var x = e.clientX - parseFloat(ronin.surface.element.style.left) - parseFloat(ronin.canvas.element.style.left);
|
||||
var y = e.clientY- parseFloat(ronin.surface.element.style.top) - parseFloat(ronin.canvas.element.style.top);
|
||||
var x = e.clientX - parseFloat(ronin.surface.element.style.left);
|
||||
var y = e.clientY- parseFloat(ronin.surface.element.style.top);
|
||||
return new Position(x+","+y);
|
||||
}
|
||||
|
||||
|
||||
120
scripts/modules/Find Results
Normal file
120
scripts/modules/Find Results
Normal file
@ -0,0 +1,120 @@
|
||||
Searching 62 files for "canvas.con"
|
||||
|
||||
/Users/VillaMoirai/Github/Hundred Rabbits/Ronin/scripts/modules/brush.pointer.js:
|
||||
26 this.distance += position.distance_to(this.position_prev);
|
||||
27
|
||||
28: ronin.canvas.context().beginPath();
|
||||
29
|
||||
30: ronin.canvas.context().globalCompositeOperation="source-over";
|
||||
31: ronin.canvas.context().moveTo(this.position_prev.x,this.position_prev.y);
|
||||
32: ronin.canvas.context().lineTo(position.x,position.y);
|
||||
33: ronin.canvas.context().lineCap="round";
|
||||
34: ronin.canvas.context().lineWidth = this.thickness();
|
||||
35: ronin.canvas.context().strokeStyle = ronin.brush.color.rgba();
|
||||
36: ronin.canvas.context().stroke();
|
||||
37: ronin.canvas.context().closePath();
|
||||
38
|
||||
39 this.position_prev = position;
|
||||
|
||||
/Users/VillaMoirai/Github/Hundred Rabbits/Ronin/scripts/modules/eraser.js:
|
||||
19 this.distance += position.distance_to(this.position_prev);
|
||||
20
|
||||
21: ronin.canvas.context().beginPath();
|
||||
22: ronin.canvas.context().globalCompositeOperation="destination-out";
|
||||
23: ronin.canvas.context().moveTo(this.position_prev.x,this.position_prev.y);
|
||||
24: ronin.canvas.context().lineTo(position.x,position.y);
|
||||
25: ronin.canvas.context().lineCap="round";
|
||||
26: ronin.canvas.context().lineWidth = 10;
|
||||
27: ronin.canvas.context().strokeStyle = new Color("#ff0000").rgba();
|
||||
28: ronin.canvas.context().stroke();
|
||||
29: ronin.canvas.context().closePath();
|
||||
30
|
||||
31 this.position_prev = position;
|
||||
|
||||
/Users/VillaMoirai/Github/Hundred Rabbits/Ronin/scripts/modules/eye.js:
|
||||
20 this.color_picker = function(position)
|
||||
21 {
|
||||
22: var imgData = ronin.canvas.context().getImageData(position.x, position.y, 1, 1).data;
|
||||
23 var c = new Color();
|
||||
24 commander.show();
|
||||
|
||||
/Users/VillaMoirai/Github/Hundred Rabbits/Ronin/scripts/modules/file.load.js:
|
||||
30 height = isNaN(height) && width > 0 ? (width*base_image.naturalHeight)/base_image.naturalWidth : height;
|
||||
31
|
||||
32: ronin.canvas.context().drawImage(base_image, position.x, position.y, width, height);
|
||||
33 }
|
||||
34 }
|
||||
|
||||
/Users/VillaMoirai/Github/Hundred Rabbits/Ronin/scripts/modules/filter.balance.js:
|
||||
43
|
||||
44 ronin.canvas.clear();
|
||||
45: ronin.canvas.context().putImageData(pixels, 0, 0, 0, 0, pixels.width, pixels.height);
|
||||
46 }
|
||||
|
||||
/Users/VillaMoirai/Github/Hundred Rabbits/Ronin/scripts/modules/filter.chromatic.js:
|
||||
35 }
|
||||
36 ronin.canvas.clear();
|
||||
37: ronin.canvas.context().putImageData(output, 0, 0, 0, 0, pixels.width, pixels.height);
|
||||
38 }
|
||||
39
|
||||
|
||||
/Users/VillaMoirai/Github/Hundred Rabbits/Ronin/scripts/modules/filter.eval.js:
|
||||
23
|
||||
24 ronin.canvas.clear();
|
||||
25: ronin.canvas.context().putImageData(pixels, 0, 0, 0, 0, pixels.width, pixels.height);
|
||||
26 console.log("done.");
|
||||
27 }
|
||||
|
||||
/Users/VillaMoirai/Github/Hundred Rabbits/Ronin/scripts/modules/filter.js:
|
||||
69 this.pixels = function()
|
||||
70 {
|
||||
71: return ronin.canvas.context().getImageData(0,0,ronin.canvas.element.width,ronin.canvas.element.height);
|
||||
72 }
|
||||
73 }
|
||||
|
||||
/Users/VillaMoirai/Github/Hundred Rabbits/Ronin/scripts/modules/filter.offset.js:
|
||||
16 }
|
||||
17 ronin.canvas.clear();
|
||||
18: ronin.canvas.context().putImageData(pixels, 0, 0, 0, 0, pixels.width, pixels.height);
|
||||
19 }
|
||||
20
|
||||
|
||||
/Users/VillaMoirai/Github/Hundred Rabbits/Ronin/scripts/modules/filter.saturation.js:
|
||||
12 }
|
||||
13 ronin.canvas.clear();
|
||||
14: ronin.canvas.context().putImageData(pixels, 0, 0, 0, 0, pixels.width, pixels.height);
|
||||
15 }
|
||||
|
||||
/Users/VillaMoirai/Github/Hundred Rabbits/Ronin/scripts/modules/stroke.js:
|
||||
49 this.draw = function(pos1,pos2)
|
||||
50 {
|
||||
51: ronin.canvas.context().beginPath();
|
||||
52: ronin.canvas.context().moveTo(pos1.x,pos1.y);
|
||||
53: ronin.canvas.context().lineTo(pos2.x,pos2.y);
|
||||
54: ronin.canvas.context().lineCap="round";
|
||||
55: ronin.canvas.context().lineWidth = 1;
|
||||
56: ronin.canvas.context().strokeStyle = new Color("#ff0000").rgba();
|
||||
57: ronin.canvas.context().stroke();
|
||||
58: ronin.canvas.context().closePath();
|
||||
59 }
|
||||
60
|
||||
|
||||
/Users/VillaMoirai/Github/Hundred Rabbits/Ronin/scripts/modules/surface.layer.js:
|
||||
23
|
||||
24 if(!position){ position = new Position("0,0");}
|
||||
25: ronin.canvas.context().drawImage(base_image, -position.x, -position.y, pixels_rect.width, pixels_rect.height);
|
||||
26: ronin.canvas.context().scale(2,2);
|
||||
27 }
|
||||
28 }
|
||||
|
||||
/Users/VillaMoirai/Github/Hundred Rabbits/Ronin/scripts/modules/vector.js:
|
||||
19 {
|
||||
20 ronin.overlay.clear();
|
||||
21: ronin.canvas.context().lineCap="round";
|
||||
22: ronin.canvas.context().lineWidth = ronin.brush.size;
|
||||
23: ronin.canvas.context().strokeStyle = ronin.brush.color.rgba();
|
||||
24: ronin.canvas.context().stroke(new Path2D(cmd.content.join(" ")));
|
||||
25 }
|
||||
26
|
||||
|
||||
40 matches across 13 files
|
||||
@ -64,7 +64,7 @@ function Brush(rune)
|
||||
|
||||
this.widget_cursor = function()
|
||||
{
|
||||
return "Brush "+this.size+", "+this.pointers.length+" pointers";
|
||||
return this.pointers.length > 0 ? "Brush "+this.size+", "+this.pointers.length+" pointers" : "No Pointers";
|
||||
}
|
||||
|
||||
// Cursor
|
||||
|
||||
@ -25,16 +25,16 @@ function Pointer(offset = new Position(), color = new Color('000000'))
|
||||
|
||||
this.distance += position.distance_to(this.position_prev);
|
||||
|
||||
ronin.canvas.context().beginPath();
|
||||
ronin.surface.context().beginPath();
|
||||
|
||||
ronin.canvas.context().globalCompositeOperation="source-over";
|
||||
ronin.canvas.context().moveTo(this.position_prev.x,this.position_prev.y);
|
||||
ronin.canvas.context().lineTo(position.x,position.y);
|
||||
ronin.canvas.context().lineCap="round";
|
||||
ronin.canvas.context().lineWidth = this.thickness();
|
||||
ronin.canvas.context().strokeStyle = ronin.brush.color.rgba();
|
||||
ronin.canvas.context().stroke();
|
||||
ronin.canvas.context().closePath();
|
||||
ronin.surface.context().globalCompositeOperation="source-over";
|
||||
ronin.surface.context().moveTo(this.position_prev.x,this.position_prev.y);
|
||||
ronin.surface.context().lineTo(position.x,position.y);
|
||||
ronin.surface.context().lineCap="round";
|
||||
ronin.surface.context().lineWidth = this.thickness();
|
||||
ronin.surface.context().strokeStyle = ronin.brush.color.rgba();
|
||||
ronin.surface.context().stroke();
|
||||
ronin.surface.context().closePath();
|
||||
|
||||
this.position_prev = position;
|
||||
}
|
||||
|
||||
@ -4,78 +4,6 @@ function Canvas(rune)
|
||||
|
||||
this.parameters = [Rect,Position,Color,Bang];
|
||||
|
||||
this.active = function(cmd)
|
||||
{
|
||||
if(cmd.bang()){ this.clear(); }
|
||||
|
||||
if(cmd.rect()){
|
||||
this.resize(cmd.rect(),cmd.position());
|
||||
ronin.overlay.resize(cmd.rect());
|
||||
}
|
||||
|
||||
if(cmd.color()){
|
||||
this.context().beginPath();
|
||||
this.context().rect(0, 0, this.element.width, this.element.height);
|
||||
this.context().fillStyle = cmd.color().hex;
|
||||
this.context().fill();
|
||||
}
|
||||
}
|
||||
|
||||
this.passive = function(cmd)
|
||||
{
|
||||
if(cmd.rect()){
|
||||
ronin.overlay.draw(cmd.position(),cmd.rect());
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
|
||||
this.resize = function(rect, position = null)
|
||||
{
|
||||
var canvas_pixels = ronin.canvas.element.toDataURL("image/png");
|
||||
var pixels_rect = new Rect(this.element.width+"x"+this.element.height);
|
||||
|
||||
this.element.width = rect.width * 2;
|
||||
this.element.height = rect.height * 2;
|
||||
this.element.style.left = (window.innerWidth/2)-(rect.width/2);
|
||||
this.element.style.top = (window.innerHeight/2)-(rect.height/2);
|
||||
this.element.style.width = rect.width+"px";
|
||||
this.element.style.height = rect.height+"px";
|
||||
|
||||
ronin.widget.element.style.left = (window.innerWidth/2)-(rect.width/2);
|
||||
ronin.widget.element.style.top = (window.innerHeight/2)+(rect.height/2);
|
||||
ronin.widget.element.style.width = rect.width+"px";
|
||||
|
||||
ronin.widget.update();
|
||||
|
||||
base_image = new Image();
|
||||
base_image.src = canvas_pixels;
|
||||
|
||||
if(!position){ position = new Position("0,0");}
|
||||
ronin.canvas.context().drawImage(base_image, -position.x, -position.y, pixels_rect.width, pixels_rect.height);
|
||||
ronin.canvas.context().scale(2,2);
|
||||
}
|
||||
|
||||
this.context = function()
|
||||
{
|
||||
return this.element.getContext('2d');
|
||||
}
|
||||
|
||||
this.clear = function()
|
||||
{
|
||||
this.context().clearRect(0, 0, this.element.width, this.element.height);
|
||||
}
|
||||
|
||||
this.widget = function()
|
||||
{
|
||||
return "@ "+this.element.width+"x"+this.element.height+" ";
|
||||
}
|
||||
|
||||
this.widget_cursor = function()
|
||||
{
|
||||
return "Move";
|
||||
}
|
||||
|
||||
// Cursor
|
||||
|
||||
this.move_from = null;
|
||||
|
||||
@ -18,15 +18,15 @@ function Eraser(rune)
|
||||
|
||||
this.distance += position.distance_to(this.position_prev);
|
||||
|
||||
ronin.canvas.context().beginPath();
|
||||
ronin.canvas.context().globalCompositeOperation="destination-out";
|
||||
ronin.canvas.context().moveTo(this.position_prev.x,this.position_prev.y);
|
||||
ronin.canvas.context().lineTo(position.x,position.y);
|
||||
ronin.canvas.context().lineCap="round";
|
||||
ronin.canvas.context().lineWidth = 10;
|
||||
ronin.canvas.context().strokeStyle = new Color("#ff0000").rgba();
|
||||
ronin.canvas.context().stroke();
|
||||
ronin.canvas.context().closePath();
|
||||
ronin.surface.context().beginPath();
|
||||
ronin.surface.context().globalCompositeOperation="destination-out";
|
||||
ronin.surface.context().moveTo(this.position_prev.x,this.position_prev.y);
|
||||
ronin.surface.context().lineTo(position.x,position.y);
|
||||
ronin.surface.context().lineCap="round";
|
||||
ronin.surface.context().lineWidth = 10;
|
||||
ronin.surface.context().strokeStyle = new Color("#ff0000").rgba();
|
||||
ronin.surface.context().stroke();
|
||||
ronin.surface.context().closePath();
|
||||
|
||||
this.position_prev = position;
|
||||
}
|
||||
|
||||
@ -19,7 +19,7 @@ function Eye(rune)
|
||||
|
||||
this.color_picker = function(position)
|
||||
{
|
||||
var imgData = ronin.canvas.context().getImageData(position.x, position.y, 1, 1).data;
|
||||
var imgData = ronin.surface.context().getImageData(position.x, position.y, 1, 1).data;
|
||||
var c = new Color();
|
||||
commander.show();
|
||||
commander.element_input.focus();
|
||||
|
||||
@ -29,7 +29,7 @@ function FileLoad(rune)
|
||||
width = isNaN(width) && height > 0 ? (height*base_image.naturalWidth)/base_image.naturalHeight : width;
|
||||
height = isNaN(height) && width > 0 ? (width*base_image.naturalHeight)/base_image.naturalWidth : height;
|
||||
|
||||
ronin.canvas.context().drawImage(base_image, position.x, position.y, width, height);
|
||||
ronin.surface.context().drawImage(base_image, position.x, position.y, width, height);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -42,5 +42,5 @@ Filter.prototype.filter_balance = function(pixels = this.pixels(),p = null)
|
||||
}
|
||||
|
||||
ronin.canvas.clear();
|
||||
ronin.canvas.context().putImageData(pixels, 0, 0, 0, 0, pixels.width, pixels.height);
|
||||
ronin.surface.context().putImageData(pixels, 0, 0, 0, 0, pixels.width, pixels.height);
|
||||
}
|
||||
@ -34,5 +34,5 @@ Filter.prototype.filter_chromatic = function(pixels = this.pixels(),p = null)
|
||||
}
|
||||
}
|
||||
ronin.canvas.clear();
|
||||
ronin.canvas.context().putImageData(output, 0, 0, 0, 0, pixels.width, pixels.height);
|
||||
ronin.surface.context().putImageData(output, 0, 0, 0, 0, pixels.width, pixels.height);
|
||||
}
|
||||
|
||||
@ -22,6 +22,6 @@ Filter.prototype.filter_eval = function(pixels = this.pixels(),p = null)
|
||||
}
|
||||
|
||||
ronin.canvas.clear();
|
||||
ronin.canvas.context().putImageData(pixels, 0, 0, 0, 0, pixels.width, pixels.height);
|
||||
ronin.surface.context().putImageData(pixels, 0, 0, 0, 0, pixels.width, pixels.height);
|
||||
console.log("done.");
|
||||
}
|
||||
@ -68,6 +68,6 @@ function Filter(rune)
|
||||
|
||||
this.pixels = function()
|
||||
{
|
||||
return ronin.canvas.context().getImageData(0,0,ronin.canvas.element.width,ronin.canvas.element.height);
|
||||
return ronin.surface.context().getImageData(0,0,ronin.canvas.element.width,ronin.canvas.element.height);
|
||||
}
|
||||
}
|
||||
|
||||
@ -15,5 +15,5 @@ Filter.prototype.filter_offset = function(pixels = this.pixels(),p = null)
|
||||
}
|
||||
}
|
||||
ronin.canvas.clear();
|
||||
ronin.canvas.context().putImageData(pixels, 0, 0, 0, 0, pixels.width, pixels.height);
|
||||
ronin.surface.context().putImageData(pixels, 0, 0, 0, 0, pixels.width, pixels.height);
|
||||
}
|
||||
|
||||
@ -11,5 +11,5 @@ Filter.prototype.filter_saturation = function(pixels = this.pixels(),p = null)
|
||||
d[i] = d[i+1] = d[i+2] = v
|
||||
}
|
||||
ronin.canvas.clear();
|
||||
ronin.canvas.context().putImageData(pixels, 0, 0, 0, 0, pixels.width, pixels.height);
|
||||
ronin.surface.context().putImageData(pixels, 0, 0, 0, 0, pixels.width, pixels.height);
|
||||
}
|
||||
@ -11,7 +11,7 @@ function History(rune)
|
||||
|
||||
for (i = 0; i < this.cmds.length; i++) {
|
||||
if(this.cmds[i][0] == this.rune){ continue; }
|
||||
html += this.cmds[i]+"<br />";
|
||||
html += this.cmds[i]+";<br />";
|
||||
}
|
||||
w.document.write("<title>Source</title><style>body { font-family:courier}</style>"+html+"");
|
||||
}
|
||||
|
||||
@ -20,7 +20,7 @@ function Stroke(rune)
|
||||
|
||||
this.save_stroke = function(mode)
|
||||
{
|
||||
s = "_ mode:"+mode+" ";
|
||||
s = "_ module="+mode+" ";
|
||||
for (i = 0; i < this.positions.length; i++) {
|
||||
s += this.positions[i].render()+" ";
|
||||
}
|
||||
@ -48,14 +48,14 @@ function Stroke(rune)
|
||||
|
||||
this.draw = function(pos1,pos2)
|
||||
{
|
||||
ronin.canvas.context().beginPath();
|
||||
ronin.canvas.context().moveTo(pos1.x,pos1.y);
|
||||
ronin.canvas.context().lineTo(pos2.x,pos2.y);
|
||||
ronin.canvas.context().lineCap="round";
|
||||
ronin.canvas.context().lineWidth = 1;
|
||||
ronin.canvas.context().strokeStyle = new Color("#ff0000").rgba();
|
||||
ronin.canvas.context().stroke();
|
||||
ronin.canvas.context().closePath();
|
||||
ronin.surface.context().beginPath();
|
||||
ronin.surface.context().moveTo(pos1.x,pos1.y);
|
||||
ronin.surface.context().lineTo(pos2.x,pos2.y);
|
||||
ronin.surface.context().lineCap="round";
|
||||
ronin.surface.context().lineWidth = 1;
|
||||
ronin.surface.context().strokeStyle = new Color("#ff0000").rgba();
|
||||
ronin.surface.context().stroke();
|
||||
ronin.surface.context().closePath();
|
||||
}
|
||||
|
||||
}
|
||||
@ -3,19 +3,90 @@ function Surface(rune)
|
||||
Module.call(this,rune);
|
||||
|
||||
this.element = null;
|
||||
this.parameters = [Any];
|
||||
this.parameters = [Rect,Color,Any];
|
||||
|
||||
this.layers = {};
|
||||
this.active_layer = null;
|
||||
|
||||
this.size = null;
|
||||
|
||||
this.active = function(cmd)
|
||||
{
|
||||
if(cmd.rect()){
|
||||
this.resize(cmd.rect(),cmd.position());
|
||||
ronin.overlay.resize(cmd.rect());
|
||||
}
|
||||
if(cmd.color()){
|
||||
this.context().beginPath();
|
||||
this.context().rect(0, 0, this.active_layer.element.width, this.active_layer.element.height);
|
||||
this.context().fillStyle = cmd.color().hex;
|
||||
this.context().fill();
|
||||
}
|
||||
|
||||
//
|
||||
|
||||
if(cmd.variable("layer")){
|
||||
var layer_name = cmd.variable("layer").value;
|
||||
if(this.layers[layer_name]){
|
||||
console.log("Selecting layer:"+layer_name);
|
||||
this.active_layer = this.layers[layer_name];
|
||||
}
|
||||
else{
|
||||
console.log("Creating layer:"+layer_name);
|
||||
this.layers[layer_name] = new Layer(layer_name,this.size);
|
||||
this.active_layer = this.layers[layer_name];
|
||||
this.element.appendChild(this.active_layer.element);
|
||||
this.active_layer.resize(this.size);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
this.passive = function(cmd)
|
||||
{
|
||||
if(cmd.rect()){
|
||||
ronin.overlay.draw(cmd.position(),cmd.rect());
|
||||
}
|
||||
}
|
||||
|
||||
this.resize = function(rect, position = null)
|
||||
{
|
||||
this.size = rect;
|
||||
|
||||
Object.keys(ronin.surface.layers).forEach(function (key) {
|
||||
ronin.surface.layers[key].resize(rect);
|
||||
});
|
||||
|
||||
ronin.surface.element.width = rect.width * 2;
|
||||
ronin.surface.element.height = rect.height * 2;
|
||||
ronin.surface.element.style.left = (window.innerWidth/2)-(rect.width/2);
|
||||
ronin.surface.element.style.top = (window.innerHeight/2)-(rect.height/2);
|
||||
ronin.surface.element.style.width = rect.width+"px";
|
||||
ronin.surface.element.style.height = rect.height+"px";
|
||||
ronin.widget.element.style.left = (window.innerWidth/2)-(rect.width/2);
|
||||
ronin.widget.element.style.top = (window.innerHeight/2)+(rect.height/2);
|
||||
ronin.widget.element.style.width = rect.width+"px";
|
||||
|
||||
ronin.widget.update();
|
||||
}
|
||||
|
||||
this.widget = function()
|
||||
{
|
||||
if(!this.active_layer){ return ""; }
|
||||
return "# "+this.active_layer.name;
|
||||
}
|
||||
|
||||
this.widget_cursor = function()
|
||||
{
|
||||
return "Drag";
|
||||
return "Move";
|
||||
}
|
||||
|
||||
// Layers
|
||||
|
||||
this.context = function()
|
||||
{
|
||||
return this.active_layer.context();
|
||||
}
|
||||
|
||||
// Cursor
|
||||
|
||||
38
scripts/modules/surface.layer.js
Normal file
38
scripts/modules/surface.layer.js
Normal file
@ -0,0 +1,38 @@
|
||||
function Layer(name)
|
||||
{
|
||||
this.name = name;
|
||||
this.element = document.createElement("canvas");
|
||||
this.element.setAttribute("id","_"+name);
|
||||
this.element.setAttribute("class","layer");
|
||||
|
||||
this.resize = function(rect)
|
||||
{
|
||||
console.log("Resize "+this.name+" to "+rect.render());
|
||||
|
||||
var canvas_pixels = this.element.toDataURL("image/png");
|
||||
var pixels_rect = new Rect(this.element.width+"x"+this.element.height);
|
||||
|
||||
this.element.width = rect.width * 2;
|
||||
this.element.height = rect.height * 2;
|
||||
this.element.style.width = rect.width+"px";
|
||||
this.element.style.height = rect.height+"px";
|
||||
|
||||
this.context().scale(2,2);
|
||||
|
||||
// base_image = new Image();
|
||||
// base_image.src = canvas_pixels;
|
||||
|
||||
// ronin.surface.context().drawImage(base_image, -position.x, -position.y, pixels_rect.width, pixels_rect.height);
|
||||
// ronin.surface.context().scale(2,2);
|
||||
}
|
||||
|
||||
this.clear = function()
|
||||
{
|
||||
this.context().clearRect(0, 0, this.element.width, this.element.height);
|
||||
}
|
||||
|
||||
this.context = function()
|
||||
{
|
||||
return this.element.getContext('2d');
|
||||
}
|
||||
}
|
||||
@ -18,10 +18,10 @@ function Vector(rune)
|
||||
this.active = function(cmd)
|
||||
{
|
||||
ronin.overlay.clear();
|
||||
ronin.canvas.context().lineCap="round";
|
||||
ronin.canvas.context().lineWidth = ronin.brush.size;
|
||||
ronin.canvas.context().strokeStyle = ronin.brush.color.rgba();
|
||||
ronin.canvas.context().stroke(new Path2D(cmd.content.join(" ")));
|
||||
ronin.surface.context().lineCap="round";
|
||||
ronin.surface.context().lineWidth = ronin.brush.size;
|
||||
ronin.surface.context().strokeStyle = ronin.brush.color.rgba();
|
||||
ronin.surface.context().stroke(new Path2D(cmd.content.join(" ")));
|
||||
}
|
||||
|
||||
// + M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0 ; Draw a circle
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user