dakedres/ronin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Basic layer support with #

Browse Source
This commit is contained in:
Devine Lu Linvega
2016-12-24 16:15:26 -07:00
parent 5b56a50a0a
commit 25ffb2f736
22 changed files with 283 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
scripts/modules/Find Results Normal file
View 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

2
scripts/modules/brush.js
View File

@@ -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

18
scripts/modules/brush.pointer.js
View File

@@ -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;
}

72
scripts/modules/canvas.js
View File

@@ -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
scripts/modules/eraser.js
View File

@@ -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;
}

2
scripts/modules/eye.js
View File

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

2
scripts/modules/file.load.js
View File

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

2
scripts/modules/filter.balance.js
View File

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

2
scripts/modules/filter.chromatic.js
View File

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

2
scripts/modules/filter.eval.js
View File

@@ -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.");
}

2
scripts/modules/filter.js
View File

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

2
scripts/modules/filter.offset.js
View File

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

2
scripts/modules/filter.saturation.js
View File

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

2
scripts/modules/history.js
View File

@@ -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+"");
}

18
scripts/modules/stroke.js
View File

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

75
scripts/modules/surface.js
View File

@@ -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
View 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');
}
}

8
scripts/modules/vector.js
View File

@@ -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