function Layer(name,host = "user") { this.name = name; this.host = host; 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 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); } this.clear = function() { this.context().clearRect(0, 0, this.element.width, this.element.height); } this.context = function() { return this.element.getContext('2d'); } this.image = function() { return this.element.toDataURL('image/png'); } this.merge = function() { console.log(ronin.surface.render_layer); var ctx = ronin.surface.render_layer.context(); var img = new Image(); img.onload = function(){ ctx.drawImage(img,10,10); }; img.src = this.element.toDataURL(); } // this.widget_cursor = function() { return "Move"; } this.widget = function() { return (ronin.surface.active_layer.name == this.name) ? "- ("+this.name+")
" : "- "+this.name+"
"; } this.move_from = null; this.mouse_down = function(position) { this.move_from = ronin.position_in_window(position); } this.mouse_move = function(position) { if(this.move_from === null){ return; } position = ronin.position_in_window(position); var offset_x = this.move_from.x - position.x; var offset_y = this.move_from.y - position.y; var content = this.context().canvas; this.context().globalCompositeOperation = "copy"; this.context().globalCompositeOperation = "source-over"; this.context().drawImage(content,-offset_x,-offset_y,ronin.surface.size.width,ronin.surface.size.height); this.move_from = new Position(position.x,position.y); } this.mouse_up = function(event) { this.move_from = null; } }