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

Implemented crop

Browse Source
This commit is contained in:
Devine Lu Linvega 2017-09-27 12:43:27 +13:00
parent 410a4ff1f4
commit 3b40d555c8
10 changed files with 140 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
sources/index.html
View File

@ -6,6 +6,7 @@
<script type="text/javascript" src="scripts/modules/eraser.js"></script>
<script type="text/javascript" src="scripts/modules/line.js"></script>
<script type="text/javascript" src="scripts/layer.js"></script>
<script type="text/javascript" src="scripts/grid.js"></script>
<script type="text/javascript" src="scripts/guide.js"></script>
<script type="text/javascript" src="scripts/io.js"></script>

2
sources/scripts/commander.js
View File

@ -35,6 +35,7 @@ function Commander()
ronin.commander.input_el.value = "";
ronin.hint.update();
ronin.guide.update();
}
this.on_input = function(e)
@ -56,6 +57,7 @@ function Commander()
this.inject = function(str,entry_code = "$")
{
ronin.commander.input_el.value = ronin.commander.input_el.value.replace(entry_code,str);
ronin.guide.update();
}
this.query = function()

2
sources/scripts/cursor.js
View File

@ -41,7 +41,7 @@ function Cursor(rune)
if(distance_between(ronin.cursor.line.origin,ronin.cursor.line.destination) > 10){
var offset = ronin.cursor.line.origin.x+","+ronin.cursor.line.origin.y;
var rect = (ronin.cursor.line.destination.x - ronin.cursor.line.origin.x)+"x"+(ronin.cursor.line.destination.y - ronin.cursor.line.origin.y);
ronin.commander.inject(offset+"%"+rect);
ronin.commander.inject(offset+"|"+rect);
}
else{
ronin.commander.inject(e.clientX+","+e.clientY);

27
sources/scripts/grid.js
View File

@ -1,21 +1,8 @@
function Grid()
{
this.el = document.createElement('canvas'); this.el.id = "grid";
Layer.call(this);
this.install = function()
{
ronin.el.appendChild(this.el);
}
this.update = function()
{
this.el.width = window.innerWidth * 2;
this.el.height = window.innerHeight * 2;
this.el.style.width = (window.innerWidth)+"px";
this.el.style.height = (window.innerHeight)+"px";
this.draw();
}
this.el.id = "grid";
this.draw = function()
{
@ -41,11 +28,6 @@ function Grid()
ctx.fill();
}
this.context = function()
{
return this.el.getContext('2d');
}
this.resize_to = function(size)
{
this.el.width = size.width * 2;
@ -55,9 +37,4 @@ function Grid()
this.draw();
}
this.clear = function()
{
ronin.render.context().clearRect(0, 0, this.el.width, this.el.height);
}
}

81
sources/scripts/guide.js
View File

@ -1,25 +1,88 @@
function Guide()
{
this.el = document.createElement('canvas'); this.el.id = "guide";
Layer.call(this);
this.install = function()
{
ronin.el.appendChild(this.el);
}
this.el.id = "guide";
this.update = function()
{
var u = ronin.guide.find_unit();
this.el.width = window.innerWidth * 2;
this.el.height = window.innerHeight * 2;
this.el.style.width = (window.innerWidth)+"px";
this.el.style.height = (window.innerHeight)+"px";
console.log(u);
// if(u.x){ this.draw_pos(u); }
// if(u.width){ this.draw_rect(u); }
var u = ronin.guide.find_unit();
if(!u){ return; }
this.clear();
this.draw(u)
}
this.draw = function(u)
{
if(u.x && u.y){
this.draw_pos(u);
}
if(u.width && u.height){
this.draw_rect(u);
}
}
this.draw_rect = function(u)
{
var ctx = this.context();
u.x = !u.x ? 0 : u.x;
u.y = !u.y ? 0 : u.y;
var offset = {x:u.x * 2, y:u.y * 2};
var rect = {width:u.width * 2,height:u.height * 2};
ctx.beginPath();
ctx.globalCompositeOperation="source-over";
ctx.moveTo(offset.x,offset.y);
ctx.lineTo(offset.x + rect.width,offset.y);
ctx.lineTo(offset.x + rect.width,offset.y + rect.height);
ctx.lineTo(offset.x,offset.y + rect.height);
ctx.lineTo(offset.x,offset.y);
ctx.lineCap="round";
ctx.lineWidth = 2;
ctx.strokeStyle = "#000";
ctx.stroke();
ctx.closePath();
}
this.draw_pos = function(u)
{
var ctx = this.context();
var offset = 2;
var radius = 5;
var pos = {x:u.x * 2, y:u.y * 2};
ctx.beginPath();
ctx.globalCompositeOperation="source-over";
ctx.moveTo(pos.x+offset,pos.y);
ctx.lineTo(pos.x+radius,pos.y);
ctx.moveTo(pos.x,pos.y+offset);
ctx.lineTo(pos.x,pos.y+radius);
ctx.moveTo(pos.x-offset,pos.y);
ctx.lineTo(pos.x-radius,pos.y);
ctx.moveTo(pos.x,pos.y-offset);
ctx.lineTo(pos.x,pos.y-radius);
ctx.lineCap="round";
ctx.lineWidth = 2;
ctx.strokeStyle = "#000";
ctx.stroke();
ctx.closePath();
}
this.find_unit = function(q = ronin.commander.query())
{
for(method_id in q.methods){
var params = q.methods[method_id];
if(!params){ return null; }
if(params.from){ return params.from[0]; }
if(params[0]){ return params[0]; }
return params;

46
sources/scripts/layer.js Normal file
View File

@ -0,0 +1,46 @@
function Layer()
{
this.el = document.createElement('canvas');
this.install = function()
{
ronin.el.appendChild(this.el);
}
this.update = function()
{
this.el.width = window.innerWidth * 2;
this.el.height = window.innerHeight * 2;
this.el.style.width = (window.innerWidth)+"px";
this.el.style.height = (window.innerHeight)+"px";
}
this.context = function()
{
return this.el.getContext('2d');
}
this.resize_to = function(size)
{
this.el.width = size.width * 2;
this.el.height = size.height * 2;
this.el.style.width = size.width+"px";
this.el.style.height = size.height+"px";
}
this.select = function(x,y,width,height)
{
return this.context().getImageData(x, y, width * 2, height * 2);
}
this.image = function()
{
return this.element.toDataURL('image/png');
}
this.clear = function()
{
console.log("Clear")
this.context().clearRect(0, 0, this.el.width * 2, this.el.height * 2);
}
}

5
sources/scripts/modules/frame.js
View File

@ -20,7 +20,11 @@ function Frame()
this.methods.crop = function(p)
{
var data = ronin.render.select(p.x,p.y,p.width,p.height);
ronin.render.clear();
ronin.frame.resize_to(p);
ronin.render.context().putImageData(data, 0, 0);
}
this.resize_to = function(size)
@ -33,5 +37,6 @@ function Frame()
win.setSize(size.width,size.height);
ronin.render.resize_to(size);
ronin.grid.resize_to(size);
ronin.guide.resize_to(size);
}
}

4
sources/scripts/query.js
View File

@ -78,8 +78,8 @@ function Query(query_str)
function parse_unit(unit_str)
{
if(unit_str.indexOf("%") > -1 && unit_str.indexOf(",") > -1 && unit_str.indexOf("x") > -1){
return Object.assign(parse_unit(unit_str.split("%")[0]), parse_unit(unit_str.split("%")[1]));
if(unit_str.indexOf("|") > -1 && unit_str.indexOf(",") > -1 && unit_str.indexOf("x") > -1){
return Object.assign(parse_unit(unit_str.split("|")[0]), parse_unit(unit_str.split("|")[1]));
}
if(unit_str.indexOf(",") > -1){
return {x:parseInt(unit_str.split(",")[0]),y:parseInt(unit_str.split(",")[1])};

33
sources/scripts/render.js
View File

@ -1,35 +1,6 @@
function Render()
{
this.el = document.createElement('canvas'); this.el.id = "render";
Layer.call(this);
this.install = function()
{
ronin.el.appendChild(this.el);
}
this.update = function()
{
this.el.width = window.innerWidth * 2;
this.el.height = window.innerHeight * 2;
this.el.style.width = (window.innerWidth)+"px";
this.el.style.height = (window.innerHeight)+"px";
}
this.context = function()
{
return this.el.getContext('2d');
}
this.resize_to = function(size)
{
this.el.width = size.width * 2;
this.el.height = size.height * 2;
this.el.style.width = size.width+"px";
this.el.style.height = size.height+"px";
}
this.clear = function()
{
ronin.render.context().clearRect(0, 0, this.el.width, this.el.height);
}
this.el.id = "render";
}

5
sources/scripts/ronin.js
View File

@ -29,7 +29,9 @@ function Ronin()
document.body.appendChild(this.el);
this.grid.install();
this.guide.install();
this.render.install();
this.commander.install();
this.hint.install();
@ -49,7 +51,8 @@ function Ronin()
console.log("Ronin","Started");
this.render.update();
this.grid.update();
this.guide.update();
this.commander.input_el.value = "line tween:$&$&$>>$&$&$";
this.commander.input_el.value = "frame crop:$";
}
}