Added rotate to layer

This commit is contained in:
Devine Lu Linvega 2017-04-10 10:29:02 -10:00
parent 1454ef2dea
commit 52c39c832c
6 changed files with 59 additions and 47 deletions

View File

@ -31,7 +31,6 @@
<script type="text/javascript" src="scripts/filters/filter.js"></script>
<script type="text/javascript" src="scripts/filters/stencil.js"></script>
<script type="text/javascript" src="scripts/filters/rotate.js"></script>
<script type="text/javascript" src="scripts/filters/invert.js"></script>
<script type="text/javascript" src="scripts/filters/chromatic.js"></script>
<script type="text/javascript" src="scripts/filters/balance.js"></script>

View File

@ -0,0 +1,23 @@
frame.resize 420x420 ;
brush:color #ff0000 ;
magnet.grid 15x15 4,4 ;
frame.select main ;
path:line_width 30 ;
path:line_color #ffffff ;
path.stroke M240,180 l0,-90 a30,-30 0 0,1 30,-30 a30,30 0 0,1 30,30 a-30,30 0 0,1 -30,30 l-180,0 a-30,-30 0 0,1 -30,-30 a30,-30 0 0,1 30,-30 a30,30 0 0,1 30,30 l0,180 a-30,30 0 0,1 -30,30 a-30,-30 0 0,1 -30,-30 a30,-30 0 0,1 30,-30 l180,0 a30,30 0 0,1 30,30 a-30,30 0 0,1 -30,30 a-30,-30 0 0,1 -30,-30 l0,-90 ;
path:line_width 1 ;
path:line_color #000000 ;
path.stroke M240,180 l0,-90 a30,-30 0 0,1 30,-30 a30,30 0 0,1 30,30 a-30,30 0 0,1 -30,30 l-180,0 a-30,-30 0 0,1 -30,-30 a30,-30 0 0,1 30,-30 a30,30 0 0,1 30,30 l0,180 a-30,30 0 0,1 -30,30 a-30,-30 0 0,1 -30,-30 a30,-30 0 0,1 30,-30 l180,0 a30,30 0 0,1 30,30 a-30,30 0 0,1 -30,30 a-30,-30 0 0,1 -30,-30 l0,-90 ;
path:line_color #ffffff ;
path:line_width 4 ;
path:line_cap butt ;
path.stroke M105,120 l30,0 M240,105 l0,30 M225,240 l30,0 M120,225 l0,30 ;
path:line_width 1 ;
path:line_color #000000 ;
path.stroke M120,105 l0,30 M225,120 l30,0 M240,225 l0,30 M135,240 l-30,0 ;
path:line_width 10 ;
path:line_color #cccccc ;
path.stroke M100,105 l0,30 M140,105 l0,30 M260,225 l0,30 M220,225 l0,30 M225,100 l30,0 M225,140 l30,0 M105,220 l30,0 M105,260 l30,0;
magnet.grid 1x1 ;
layer.rotate 180,180 45' ;
layer.translate 30,30 ;

View File

@ -2,7 +2,5 @@ terminal.display hide ;
frame.resize 1060x600 ;
source.load /08.jpg x600 ;
render.sharpen 0.25 ;
render.saturate #ffffff;
render.contrast 0.25 ;
source.load /hundred.rabbits.logo.white.svg 70x70 0,530 ;
source.save

View File

@ -1,42 +0,0 @@
function Filter_Rotate()
{
Filter.call(this);
this.parameters = [Angle,Position];
this.render = function(cmd)
{
var position = cmd.position() ? cmd.position() : new Position(ronin.frame.settings["size"].width/2,ronin.frame.settings["size"].height/2);
var angle = cmd.angle() ? cmd.angle().degrees : 90;
ronin.overlay.clear();
this.draw(this.context(),angle,position);
ronin.overlay.clear();
}
this.preview = function(cmd)
{
if(cmd.position()){
ronin.overlay.clear();
ronin.overlay.draw_pointer(cmd.position());
}
}
this.draw = function(context = this.context(), angle, position)
{
var w = ronin.frame.settings["size"].width;
var h = ronin.frame.settings["size"].height;
ronin.overlay.context().drawImage(context.canvas,0,0,w,h);
ronin.frame.active_layer.clear();
context.save();
context.translate(position.x,position.y);
context.rotate(angle*Math.PI/180);
context.drawImage(ronin.overlay.context().canvas, -position.x, -position.y,w,h)
context.rotate(-angle*Math.PI/180);
context.restore();
}
}

View File

@ -3,6 +3,8 @@ function Layer(name,manager = null)
Module.call(this,"#");
this.add_method(new Method("translate",["position"]));
this.add_method(new Method("rotate",["position","angle"]));
this.add_method(new Method("scale",["position","value"]));
this.add_method(new Method("clear",[]));
this.add_method(new Method("rotate",["position","angle"]));
this.add_method(new Method("mirror",["position"]));
@ -17,10 +19,43 @@ function Layer(name,manager = null)
this.element.setAttribute("id","_"+name);
this.element.setAttribute("class","layer");
this.scale = function(params,preview = false)
{
// TODO
// ronin.render.get_layer();
// ronin.render.context().drawImage(ronin.frame.context().canvas,0,0,w/2,h/2);
}
this.rotate = function(params, preview = false)
{
if(preview){ ronin.overlay.draw_pointer(params.position()); return; }
if(!params.position()){ return; }
var position = params.position();
var angle = params.angle().degrees;
var w = ronin.frame.settings["size"].width;
var h = ronin.frame.settings["size"].height;
ronin.render.get_layer().clear();
ronin.render.context().drawImage(ronin.frame.context().canvas,0,0,w,h);
ronin.frame.active_layer.clear();
ronin.frame.context().save();
ronin.frame.context().translate(position.x,position.y);
ronin.frame.context().rotate(angle*Math.PI/180);
ronin.frame.context().drawImage(ronin.render.context().canvas, -position.x, -position.y,w,h)
ronin.frame.context().rotate(-angle*Math.PI/180);
ronin.frame.context().restore();
ronin.render.get_layer().clear();
}
this.translate = function(params,preview = false)
{
if(!params.position()){ return; }
if(preview){ return; }
if(!params.position()){ return; }
var data = this.data();
this.clear();

View File

@ -4,7 +4,6 @@ function Render(rune)
this.collection = {};
this.collection["rotate"] = new Filter_Rotate();
this.collection["balance"] = new Filter_Balance();
this.collection["grey"] = new Filter_Grey();
this.collection["stencil"] = new Filter_Stencil();