diff --git a/sources/links/main.css b/sources/links/main.css index 36afb4b..d87a9b4 100644 --- a/sources/links/main.css +++ b/sources/links/main.css @@ -1,4 +1,4 @@ -body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_medium",courier,monospace;} +body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_medium",courier,monospace; background:red;} *:focus {outline: none; } * { cursor: none } diff --git a/sources/scripts/layers/guide.js b/sources/scripts/layers/guide.js index cd5c776..f4d1696 100644 --- a/sources/scripts/layers/guide.js +++ b/sources/scripts/layers/guide.js @@ -3,6 +3,7 @@ function Guide() Layer.call(this); this.el.id = "guide"; + this.inspect = true; this.update = function() { @@ -22,15 +23,18 @@ function Guide() } } - this.draw = function(u) + this.draw = function(u = null) { - if(u.x && u.y){ + if(u && u.x && u.y){ this.draw_pos(u); } - if(u.width && u.height){ + if(u && u.width && u.height){ this.draw_rect(u); this.draw_pos({x:u.x + (u.width/2),y:u.y + (u.height/2)}); } + if(this.inspect){ + this.draw_inspector(); + } } this.draw_rect = function(u) @@ -59,6 +63,22 @@ function Guide() ctx.closePath(); } + + this.draw_line = function(u1,u2, color = "#000") + { + var ctx = this.context(); + + ctx.beginPath(); + ctx.globalCompositeOperation="source-over"; + ctx.moveTo(u1.x * 2,u1.y * 2); + ctx.lineTo(u2.x * 2,u2.y * 2); + ctx.lineCap="round"; + ctx.lineWidth = 2; + ctx.strokeStyle = color; + ctx.stroke(); + ctx.closePath(); + } + this.draw_pos = function(u) { var ctx = this.context(); @@ -103,14 +123,72 @@ function Guide() a = a.concat(params); } } - - // for(setting in q.settings){ - // var params = q.settings[method_id]; - // if(!params){ return null; } - // if(params[0]){ return params[0]; } - // return params; - // } - return a; } + + this.draw_inspector = function() + { + // + this.draw_line({x:ronin.frame.width/2,y:0},{x:ronin.frame.width/2,y:ronin.frame.height},"red"); + this.draw_line({x:0,y:ronin.frame.height/2},{x:ronin.frame.width,y:ronin.frame.height/2},"red"); + + var ctx = this.context(); + + var w = ronin.frame.width * 2; + var h = ronin.frame.height * 2; + var angle = parseInt(ronin.commander.query().methods.inspect) > 0 ? parseInt(ronin.commander.query().methods.inspect) : 0; + var color = "red" + + ctx.translate(w/2,h/2); + + ctx.rotate(angle*Math.PI/180); + + this.line(ctx,-w,0,w,0,color); + + this.line(ctx,w*0.4,-h,w*0.4,h,color); + this.line(ctx,-w*0.4,-h,-w*0.4,h,color); + + this.line(ctx,-w,h*0.25,w,h*0.25,color); + this.line(ctx,-w,-h*0.25,w,-h*0.25,color); + + this.line(ctx,w*0.1,0,w*0.1,h,color); + this.line(ctx,-w*0.1,0,-w*0.1,-h,color); + + this.circle(ctx,w*0.4,-h*0.25,w*0.05,1,1.5,color); + this.circle(ctx,-w*0.4,h*0.25,w*0.05,0,0.5,color); + + ctx.font = "5px Arial"; + ctx.fillStyle = color; + ctx.fillText(angle+"'",(w*0.4)+10,10); + + ctx.font = "5px Arial"; + ctx.fillStyle = color; + ctx.fillText(angle+"'",(-w*0.4)-20,-10); + + ctx.rotate(-angle*Math.PI/180); + ctx.translate(-w/2,-h/2); + } + + this.line = function(context,x1,x2,y1,y2,color) + { + context.beginPath(); + context.moveTo(x1,x2); + context.lineTo(y1,y2); + context.lineCap="round"; + context.lineWidth = 0.5; + context.strokeStyle = color; + context.stroke(); + context.closePath(); + } + + this.circle = function(context,x,y,r,c1,c2,color) + { + context.beginPath(); + context.arc(x,y,r,c1*Math.PI,c2*Math.PI); + context.lineCap="round"; + context.lineWidth = 0.5; + context.strokeStyle = color; + context.stroke(); + context.closePath(); + } } \ No newline at end of file diff --git a/sources/scripts/modules/frame.js b/sources/scripts/modules/frame.js index 60c9b65..1dac0e8 100644 --- a/sources/scripts/modules/frame.js +++ b/sources/scripts/modules/frame.js @@ -41,6 +41,11 @@ function Frame() ronin.render.fill(q); }); + this.methods.inspect = new Method("inspect","","View canvas details",function(q){ + ronin.layers.guide.inspect = ronin.layers.guide.inspect ? false : true; + ronin.layers.guide.draw(); + }); + this.resize_to = function(size) { ronin.frame.width = size.width; diff --git a/sources/scripts/modules/io.js b/sources/scripts/modules/io.js index 8e7d2bd..9246aef 100644 --- a/sources/scripts/modules/io.js +++ b/sources/scripts/modules/io.js @@ -55,7 +55,8 @@ function IO() { var width = parseInt(img.naturalWidth * 0.5); var height = parseInt(img.naturalHeight * 0.5); - var scale = (params.width/width) * 2; + + var scale = params.width > params.height ? (params.width/width) * 2 : (params.height/height) * 2; ctx.drawImage(img, params.x * 2,params.y * 2,width * scale,height * scale); } diff --git a/sources/scripts/modules/magnet.js b/sources/scripts/modules/magnet.js index 424d72b..6bb42a7 100644 --- a/sources/scripts/modules/magnet.js +++ b/sources/scripts/modules/magnet.js @@ -4,7 +4,7 @@ function Magnet() this.settings = {size:0,step:4}; - this.methods.lock = new Method("lock","10x10","Magnetize cursor",function(q){ + this.methods.lock = new Method("lock","10","Magnetize cursor",function(q){ var size = parseInt(q); if(size < 5){ this.unlock(); return; } ronin.magnet.settings.size = size; diff --git a/sources/scripts/ronin.js b/sources/scripts/ronin.js index e567480..3e6ae60 100644 --- a/sources/scripts/ronin.js +++ b/sources/scripts/ronin.js @@ -17,7 +17,6 @@ function Ronin() this.io = new IO(); this.brush = new Brush(); this.frame = new Frame(); - this.line = new Line(); this.path = new Path(); this.magnet = new Magnet(); this.filter = new Filter(); @@ -34,7 +33,6 @@ function Ronin() this.modules = { brush : this.brush, frame : this.frame, - line : this.line, io : this.io, path : this.path, magnet : this.magnet,