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

Minor progress on layer merges

Browse Source
This commit is contained in:
Devine Lu Linvega 2016-12-25 11:47:45 -07:00
parent 22d77e185d
commit 7d5df4b149
5 changed files with 35 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
links/main.css
View File

@ -7,7 +7,9 @@ canvas:hover { cursor: crosshair;}
#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;}
#widget { color:#efefef; position:absolute; font-size:10px; line-height:30px;}
#widget { color:#efefef; position:absolute; font-size:10px; padding-top:10px;}
#widget .module { float:left; margin-right:10px; }
#widget .module .highlight { color:#72dec2; }
#widget .cursor { float:right;}
#commander { display:none; z-index: 2000; position:fixed; }

4
scripts/core/widget.js
View File

@ -7,10 +7,10 @@ function Widget()
var s = "";
for (var key in ronin.modules){
s += ronin.modules[key].widget();
s += ronin.modules[key].widget() ? "<div class='module'>"+ronin.modules[key].widget()+"</div>" : "";
}
s += "<span class='cursor'>"+ronin.cursor.mode.widget_cursor()+"</span>";
s += "<div class='cursor'>"+ronin.cursor.mode.widget_cursor()+"</div>";
this.element.innerHTML = s;
}

4
scripts/modules/file.save.js
View File

@ -6,9 +6,9 @@ function FileSave(rune)
this.active = function(cmd)
{
var n = cmd.any().string[1];
var n = "Ronin Export";
var f = cmd.variable("format");
var d = ronin.canvas.element.toDataURL("image/png");
var d = ronin.surface.merged();
var w = window.open('about:blank','image from canvas');
w.document.write("<title>"+(n ? n : "Untitled")+"</title><img src='"+d+"'/>");
}

28
scripts/modules/surface.js
View File

@ -73,7 +73,13 @@ function Surface(rune)
this.widget = function()
{
if(!this.active_layer){ return ""; }
return "# "+this.active_layer.name;
var s = "";
Object.keys(ronin.surface.layers).forEach(function (key) {
s += "# "+key+"<br />";
});
return s; // "# "+this.active_layer.name;
}
this.widget_cursor = function()
@ -87,6 +93,26 @@ function Surface(rune)
{
return this.active_layer.context();
}
this.merged = function()
{
var export_canvas = document.createElement("canvas");
export_canvas.width = this.size.width;
export_canvas.height = this.size.height;
Object.keys(ronin.surface.layers).forEach(function (key) {
var base_image = new Image();
base_image.src = ronin.surface.layers[key].element.toDataURL('image/png');
export_canvas.getContext('2d').drawImage(base_image,0,0);
});
return this.active_layer.element.toDataURL('image/png');
// this.context().globalCompositeOperation = "copy";
// this.context().drawImage(this.context().canvas, -offset_x, -offset_y);
// this.context().globalCompositeOperation = "source-over";
}
// Cursor

9
scripts/modules/surface.layer.js
View File

@ -9,7 +9,6 @@ function Layer(name)
{
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;
@ -18,12 +17,6 @@ function Layer(name)
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()
@ -61,7 +54,7 @@ function Layer(name)
this.context().globalCompositeOperation = "copy";
this.context().drawImage(this.context().canvas, -offset_x, -offset_y);
this.context().globalCompositeOperation = "source-over"
this.context().globalCompositeOperation = "source-over";
this.move_from = new Position(position.x,position.y);
}