Let's get this party started
This commit is contained in:
Devine Lu Linvega
@@ -1,119 +1,108 @@
|
||||
function Brush()
|
||||
{
|
||||
Module.call(this,"brush");
|
||||
function Brush () {
|
||||
Module.call(this, 'brush')
|
||||
|
||||
this.speed = 0;
|
||||
this.swatch = new Swatch();
|
||||
this.speed = 0
|
||||
this.swatch = new Swatch()
|
||||
|
||||
this.pointers = [
|
||||
new Pointer({offset:{x:0,y:0}})
|
||||
];
|
||||
new Pointer({ offset: { x: 0, y: 0 } })
|
||||
]
|
||||
|
||||
this.methods.add = new Method("add","x,y&mirror_x,mirror_y","Add a new pointer to the brush",function(q){
|
||||
var offset = q.length ? q[0] : q;
|
||||
var mirror = q.length ? q[1] : null;
|
||||
ronin.brush.pointers.push(new Pointer({offset:offset,mirror:mirror}));
|
||||
this.methods.add = new Method('add', 'x,y&mirror_x,mirror_y', 'Add a new pointer to the brush', function (q) {
|
||||
var offset = q.length ? q[0] : q
|
||||
var mirror = q.length ? q[1] : null
|
||||
ronin.brush.pointers.push(new Pointer({ offset: offset, mirror: mirror }))
|
||||
})
|
||||
|
||||
this.methods.remove = new Method("remove","","Remove last pointer",function(q){
|
||||
ronin.brush.pointers.pop();
|
||||
this.methods.remove = new Method('remove', '', 'Remove last pointer', function (q) {
|
||||
ronin.brush.pointers.pop()
|
||||
})
|
||||
|
||||
this.methods.pick = new Method("pick","x,y","Set brush color to a position's pixel.",function(q){
|
||||
var pixel = (ronin.commander.input_el.value == "~" ? ronin.guide: ronin.cursor.target).context() .getImageData(q.x*2, q.y*2, 1, 1).data;
|
||||
var c = new Color().rgb_to_hex(pixel);
|
||||
var color = new Color(c);
|
||||
ronin.cursor.color = color.hex;
|
||||
ronin.hint.update();
|
||||
this.methods.pick = new Method('pick', 'x,y', "Set brush color to a position's pixel.", function (q) {
|
||||
var pixel = (ronin.commander.input_el.value == '~' ? ronin.guide : ronin.cursor.target).context().getImageData(q.x * 2, q.y * 2, 1, 1).data
|
||||
var c = new Color().rgb_to_hex(pixel)
|
||||
var color = new Color(c)
|
||||
ronin.cursor.color = color.hex
|
||||
ronin.hint.update()
|
||||
})
|
||||
|
||||
this.methods.set_color = new Method("set_color","#ff0033","Set color",function(q){
|
||||
ronin.cursor.color = q;
|
||||
this.methods.set_color = new Method('set_color', '#ff0033', 'Set color', function (q) {
|
||||
ronin.cursor.color = q
|
||||
})
|
||||
|
||||
this.absolute_thickness = 0;
|
||||
this.absolute_thickness = 0
|
||||
|
||||
this.thickness = function(line)
|
||||
{
|
||||
var ratio = clamp(1 - (ronin.brush.speed/20),0,1)
|
||||
var t = ronin.cursor.size * ratio;
|
||||
this.absolute_thickness = t > this.absolute_thickness ? this.absolute_thickness+0.25 : this.absolute_thickness-0.25;
|
||||
return this.absolute_thickness;
|
||||
this.thickness = function (line) {
|
||||
var ratio = clamp(1 - (ronin.brush.speed / 20), 0, 1)
|
||||
var t = ronin.cursor.size * ratio
|
||||
this.absolute_thickness = t > this.absolute_thickness ? this.absolute_thickness + 0.25 : this.absolute_thickness - 0.25
|
||||
return this.absolute_thickness
|
||||
}
|
||||
|
||||
this.stroke = function(line)
|
||||
{
|
||||
this.speed = distance_between(line.from,line.to);
|
||||
this.stroke = function (line) {
|
||||
this.speed = distance_between(line.from, line.to)
|
||||
|
||||
for(pointer_id in this.pointers){
|
||||
this.pointers[pointer_id].stroke(line);
|
||||
for (pointer_id in this.pointers) {
|
||||
this.pointers[pointer_id].stroke(line)
|
||||
}
|
||||
}
|
||||
|
||||
this.erase = function(line)
|
||||
{
|
||||
this.speed = distance_between(line.from,line.to);
|
||||
this.erase = function (line) {
|
||||
this.speed = distance_between(line.from, line.to)
|
||||
|
||||
for(pointer_id in this.pointers){
|
||||
this.pointers[pointer_id].stroke(line,true);
|
||||
for (pointer_id in this.pointers) {
|
||||
this.pointers[pointer_id].stroke(line, true)
|
||||
}
|
||||
}
|
||||
|
||||
this.pick = function(line)
|
||||
{
|
||||
if(!line.to){
|
||||
this.pick = function (line) {
|
||||
if (!line.to) {
|
||||
line.to = line.from
|
||||
}
|
||||
|
||||
var pixel = ronin.cursor.target.context().getImageData(line.to.x*2, line.to.y*2, 1, 1).data;
|
||||
var pixel = ronin.cursor.target.context().getImageData(line.to.x * 2, line.to.y * 2, 1, 1).data
|
||||
}
|
||||
|
||||
this.mod_size = function(mod)
|
||||
{
|
||||
ronin.cursor.size = clamp(parseInt(ronin.cursor.size)+mod,1,100);
|
||||
this.mod_size = function (mod) {
|
||||
ronin.cursor.size = clamp(parseInt(ronin.cursor.size) + mod, 1, 100)
|
||||
}
|
||||
|
||||
function clamp(v, min, max)
|
||||
{
|
||||
return v < min ? min : v > max ? max : v;
|
||||
function clamp (v, min, max) {
|
||||
return v < min ? min : v > max ? max : v
|
||||
}
|
||||
|
||||
function distance_between(a,b)
|
||||
{
|
||||
return a && b ? Math.sqrt( (a.x-b.x)*(a.x-b.x) + (a.y-b.y)*(a.y-b.y) ) : 0;
|
||||
function distance_between (a, b) {
|
||||
return a && b ? Math.sqrt((a.x - b.x) * (a.x - b.x) + (a.y - b.y) * (a.y - b.y)) : 0
|
||||
}
|
||||
}
|
||||
|
||||
function Pointer(options)
|
||||
{
|
||||
this.options = options;
|
||||
function Pointer (options) {
|
||||
this.options = options
|
||||
|
||||
this.stroke = function(line,erase = false)
|
||||
{
|
||||
var ctx = ronin.cursor.target.context();
|
||||
this.stroke = function (line, erase = false) {
|
||||
var ctx = ronin.cursor.target.context()
|
||||
|
||||
if(this.options.mirror){
|
||||
line.from.x = (this.options.mirror.x *2) - line.from.x;
|
||||
line.to.x = (this.options.mirror.x*2) - line.to.x;
|
||||
if (this.options.mirror) {
|
||||
line.from.x = (this.options.mirror.x * 2) - line.from.x
|
||||
line.to.x = (this.options.mirror.x * 2) - line.to.x
|
||||
}
|
||||
|
||||
if(!line.to){
|
||||
if (!line.to) {
|
||||
line.to = line.from
|
||||
}
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.globalCompositeOperation = erase ? "destination-out" : "source-over";
|
||||
ctx.moveTo((line.from.x * 2) + this.options.offset.x,(line.from.y * 2) + this.options.offset.y);
|
||||
ctx.lineTo((line.to.x * 2) + this.options.offset.x,(line.to.y * 2) + this.options.offset.y);
|
||||
ctx.lineCap="round";
|
||||
ctx.lineWidth = ronin.brush.thickness(line);
|
||||
ctx.strokeStyle = ronin.brush.swatch.color();
|
||||
ctx.stroke();
|
||||
ctx.closePath();
|
||||
ctx.beginPath()
|
||||
ctx.globalCompositeOperation = erase ? 'destination-out' : 'source-over'
|
||||
ctx.moveTo((line.from.x * 2) + this.options.offset.x, (line.from.y * 2) + this.options.offset.y)
|
||||
ctx.lineTo((line.to.x * 2) + this.options.offset.x, (line.to.y * 2) + this.options.offset.y)
|
||||
ctx.lineCap = 'round'
|
||||
ctx.lineWidth = ronin.brush.thickness(line)
|
||||
ctx.strokeStyle = ronin.brush.swatch.color()
|
||||
ctx.stroke()
|
||||
ctx.closePath()
|
||||
}
|
||||
|
||||
function clamp(v, min, max)
|
||||
{
|
||||
return v < min ? min : v > max ? max : v;
|
||||
function clamp (v, min, max) {
|
||||
return v < min ? min : v > max ? max : v
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,64 +1,60 @@
|
||||
function Filter()
|
||||
{
|
||||
Module.call(this,"filter","Pixel filter");
|
||||
function Filter () {
|
||||
Module.call(this, 'filter', 'Pixel filter')
|
||||
|
||||
this.methods.balance = new Method("balance","#ff0033","Filter color balance.",function(q){
|
||||
this.methods.balance = new Method('balance', '#ff0033', 'Filter color balance.', function (q) {
|
||||
var color = new Color(q).floats()
|
||||
|
||||
var color = new Color(q).floats();
|
||||
var originalData = ronin.cursor.target.context().getImageData(0, 0, ronin.frame.width * 2, ronin.frame.height * 2)
|
||||
var data = originalData.data
|
||||
|
||||
var originalData = ronin.cursor.target.context().getImageData(0, 0, ronin.frame.width*2, ronin.frame.height*2);
|
||||
var data = originalData.data;
|
||||
|
||||
for(var i = 0; i < data.length; i += 4) {
|
||||
data[i] = data[i] * (color.r + 0.5);
|
||||
data[i + 1] = data[i + 1] * (color.g + 0.5);
|
||||
data[i + 2] = data[i + 2] * (color.b + 0.5);
|
||||
for (var i = 0; i < data.length; i += 4) {
|
||||
data[i] = data[i] * (color.r + 0.5)
|
||||
data[i + 1] = data[i + 1] * (color.g + 0.5)
|
||||
data[i + 2] = data[i + 2] * (color.b + 0.5)
|
||||
}
|
||||
|
||||
ronin.cursor.target.context().putImageData(originalData, 0, 0);
|
||||
});
|
||||
ronin.cursor.target.context().putImageData(originalData, 0, 0)
|
||||
})
|
||||
|
||||
this.methods.saturation = new Method("saturation","#ff00333","Filter color saturation.",function(q){
|
||||
this.methods.saturation = new Method('saturation', '#ff00333', 'Filter color saturation.', function (q) {
|
||||
var color = new Color(q).floats()
|
||||
|
||||
var color = new Color(q).floats();
|
||||
var originalData = ronin.cursor.target.context().getImageData(0, 0, ronin.frame.width * 2, ronin.frame.height * 2)
|
||||
var data = originalData.data
|
||||
|
||||
var originalData = ronin.cursor.target.context().getImageData(0, 0, ronin.frame.width*2, ronin.frame.height*2);
|
||||
var data = originalData.data;
|
||||
|
||||
for(var i = 0; i < data.length; i += 4) {
|
||||
var r = data[i];
|
||||
var g = data[i+1];
|
||||
var b = data[i+2];
|
||||
var v = color.r*r + color.g*g + color.b*b;
|
||||
data[i] = data[i+1] = data[i+2] = v
|
||||
for (var i = 0; i < data.length; i += 4) {
|
||||
var r = data[i]
|
||||
var g = data[i + 1]
|
||||
var b = data[i + 2]
|
||||
var v = color.r * r + color.g * g + color.b * b
|
||||
data[i] = data[i + 1] = data[i + 2] = v
|
||||
}
|
||||
|
||||
ronin.cursor.target.context().putImageData(originalData, 0, 0);
|
||||
});
|
||||
ronin.cursor.target.context().putImageData(originalData, 0, 0)
|
||||
})
|
||||
|
||||
this.preview = function(q)
|
||||
{
|
||||
if(!q.methods.saturation){ return; }
|
||||
this.preview = function (q) {
|
||||
if (!q.methods.saturation) { return }
|
||||
|
||||
ronin.preview.clear();
|
||||
ronin.preview.clear()
|
||||
|
||||
// var color = new Color(q).floats();
|
||||
|
||||
var x = q.methods.saturation.x/ronin.frame.width;
|
||||
var x = q.methods.saturation.x / ronin.frame.width
|
||||
|
||||
var originalData = ronin.cursor.target.context().getImageData(0, 0, ronin.frame.width*2, ronin.frame.height*2);
|
||||
var data = originalData.data;
|
||||
var originalData = ronin.cursor.target.context().getImageData(0, 0, ronin.frame.width * 2, ronin.frame.height * 2)
|
||||
var data = originalData.data
|
||||
|
||||
for(var i = 0; i < data.length; i += 4) {
|
||||
var r = data[i];
|
||||
var g = data[i+1];
|
||||
var b = data[i+2];
|
||||
var v = (r + g + b)/3;
|
||||
data[i] = (r*x)+(v*(1-x))
|
||||
data[i+1] = (g*x)+(v*(1-x))
|
||||
data[i+2] = (b*x)+(v*(1-x))
|
||||
for (var i = 0; i < data.length; i += 4) {
|
||||
var r = data[i]
|
||||
var g = data[i + 1]
|
||||
var b = data[i + 2]
|
||||
var v = (r + g + b) / 3
|
||||
data[i] = (r * x) + (v * (1 - x))
|
||||
data[i + 1] = (g * x) + (v * (1 - x))
|
||||
data[i + 2] = (b * x) + (v * (1 - x))
|
||||
}
|
||||
|
||||
ronin.preview.context().putImageData(originalData, 0, 0);
|
||||
ronin.preview.context().putImageData(originalData, 0, 0)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,93 +1,90 @@
|
||||
function Frame()
|
||||
{
|
||||
Module.call(this,"frame","Manager for the canvas size");
|
||||
|
||||
this.el = document.createElement('surface');
|
||||
this.background = "pink";
|
||||
function Frame () {
|
||||
Module.call(this, 'frame', 'Manager for the canvas size')
|
||||
|
||||
this.install = function()
|
||||
{
|
||||
ronin.el.appendChild(this.el);
|
||||
this.el = document.createElement('surface')
|
||||
this.background = 'pink'
|
||||
|
||||
this.install = function () {
|
||||
ronin.el.appendChild(this.el)
|
||||
}
|
||||
|
||||
this.methods.new = new Method("new","WxH","New Canvas",function(q){
|
||||
ronin.layers.above.clear();
|
||||
ronin.layers.below.clear();
|
||||
ronin.frame.resize_to({width:900,height:540});
|
||||
});
|
||||
this.methods.new = new Method('new', 'WxH', 'New Canvas', function (q) {
|
||||
ronin.layers.above.clear()
|
||||
ronin.layers.below.clear()
|
||||
ronin.frame.resize_to({ width: 900, height: 540 })
|
||||
})
|
||||
|
||||
this.width = 400;
|
||||
this.height = 400;
|
||||
this.zoom = {scale:1,offset:{x:0,y:0}};
|
||||
this.width = 400
|
||||
this.height = 400
|
||||
this.zoom = { scale: 1, offset: { x: 0, y: 0 } }
|
||||
|
||||
this.methods.set_background = new Method("set_background","WxH","Resize canvas to size.",function(q){
|
||||
ronin.frame.background = q;
|
||||
ronin.frame.el.style.backgroundColor = q;
|
||||
});
|
||||
this.methods.set_background = new Method('set_background', 'WxH', 'Resize canvas to size.', function (q) {
|
||||
ronin.frame.background = q
|
||||
ronin.frame.el.style.backgroundColor = q
|
||||
})
|
||||
|
||||
this.methods.resize = new Method("resize","WxH","Resize canvas to size.",function(q){
|
||||
var data = ronin.cursor.target.select(0,0,ronin.frame.width,ronin.frame.height);
|
||||
ronin.cursor.target.clear();
|
||||
ronin.frame.resize_to(q);
|
||||
ronin.cursor.target.context().putImageData(data, 0, 0);
|
||||
});
|
||||
this.methods.resize = new Method('resize', 'WxH', 'Resize canvas to size.', function (q) {
|
||||
var data = ronin.cursor.target.select(0, 0, ronin.frame.width, ronin.frame.height)
|
||||
ronin.cursor.target.clear()
|
||||
ronin.frame.resize_to(q)
|
||||
ronin.cursor.target.context().putImageData(data, 0, 0)
|
||||
})
|
||||
|
||||
this.methods.rescale = new Method("rescale","0.5","Rescale canvas to float.",function(p){
|
||||
var new_size = {width:ronin.frame.width * p,height:ronin.frame.height * p};
|
||||
ronin.cursor.target.context().drawImage(ronin.cursor.target.to_img(),0,0,new_size.width * 2,new_size.height * 2);
|
||||
setTimeout(function(){ ronin.frame.methods.resize.run(new_size);},500)
|
||||
});
|
||||
this.methods.rescale = new Method('rescale', '0.5', 'Rescale canvas to float.', function (p) {
|
||||
var new_size = { width: ronin.frame.width * p, height: ronin.frame.height * p }
|
||||
ronin.cursor.target.context().drawImage(ronin.cursor.target.to_img(), 0, 0, new_size.width * 2, new_size.height * 2)
|
||||
setTimeout(function () { ronin.frame.methods.resize.run(new_size) }, 500)
|
||||
})
|
||||
|
||||
this.methods.crop = new Method("crop","X,Y|WxH","Crop canvas to rect.",function(p){
|
||||
var data = ronin.cursor.target.select(0,0,p.width*2,p.height*2);
|
||||
ronin.cursor.target.clear();
|
||||
ronin.frame.resize_to(p);
|
||||
setTimeout(function(){ ronin.cursor.target.context().putImageData(data, p.x*-2, p.y*-2);},500)
|
||||
});
|
||||
this.methods.crop = new Method('crop', 'X,Y|WxH', 'Crop canvas to rect.', function (p) {
|
||||
var data = ronin.cursor.target.select(0, 0, p.width * 2, p.height * 2)
|
||||
ronin.cursor.target.clear()
|
||||
ronin.frame.resize_to(p)
|
||||
setTimeout(function () { ronin.cursor.target.context().putImageData(data, p.x * -2, p.y * -2) }, 500)
|
||||
})
|
||||
|
||||
this.methods.clear = new Method("clear","","Erase entire canvas",function(q){
|
||||
ronin.cursor.target.clear();
|
||||
});
|
||||
this.methods.clear = new Method('clear', '', 'Erase entire canvas', function (q) {
|
||||
ronin.cursor.target.clear()
|
||||
})
|
||||
|
||||
this.methods.fill = new Method("fill","#f00","Fill entire canvas with color",function(q){
|
||||
ronin.cursor.target.fill(q ? q : ronin.cursor.color);
|
||||
});
|
||||
this.methods.fill = new Method('fill', '#f00', 'Fill entire canvas with color', function (q) {
|
||||
ronin.cursor.target.fill(q || ronin.cursor.color)
|
||||
})
|
||||
|
||||
this.methods.inspect = new Method("inspect","","View canvas details",function(q){
|
||||
ronin.guide.inspect = ronin.guide.inspect ? false : true;
|
||||
ronin.guide.draw();
|
||||
});
|
||||
this.methods.inspect = new Method('inspect', '', 'View canvas details', function (q) {
|
||||
ronin.guide.inspect = !ronin.guide.inspect
|
||||
ronin.guide.draw()
|
||||
})
|
||||
|
||||
this.methods.zoom = new Method("zoom","","Zoom canvas",function(q){
|
||||
if(ronin.frame.zoom.scale == parseInt(q)){ return; }
|
||||
this.methods.zoom = new Method('zoom', '', 'Zoom canvas', function (q) {
|
||||
if (ronin.frame.zoom.scale == parseInt(q)) { return }
|
||||
|
||||
ronin.frame.zoom.scale = parseInt(q);
|
||||
ronin.frame.zoom.scale = parseInt(q)
|
||||
|
||||
ronin.frame.el.style.width = `${ronin.frame.width * ronin.frame.zoom.scale}px`;
|
||||
ronin.frame.el.style.height = `${ronin.frame.height * ronin.frame.zoom.scale}px`;
|
||||
ronin.frame.zoom.offset.x = ronin.frame.zoom.scale == 1 ? 0 : ((-ronin.cursor.pos.x * ronin.frame.zoom.scale) + (ronin.frame.width/2));
|
||||
ronin.frame.zoom.offset.y = ronin.frame.zoom.scale == 1 ? 0 : ((-ronin.cursor.pos.y * ronin.frame.zoom.scale) + (ronin.frame.height/2));
|
||||
ronin.frame.el.style.width = `${ronin.frame.width * ronin.frame.zoom.scale}px`
|
||||
ronin.frame.el.style.height = `${ronin.frame.height * ronin.frame.zoom.scale}px`
|
||||
ronin.frame.zoom.offset.x = ronin.frame.zoom.scale == 1 ? 0 : ((-ronin.cursor.pos.x * ronin.frame.zoom.scale) + (ronin.frame.width / 2))
|
||||
ronin.frame.zoom.offset.y = ronin.frame.zoom.scale == 1 ? 0 : ((-ronin.cursor.pos.y * ronin.frame.zoom.scale) + (ronin.frame.height / 2))
|
||||
|
||||
// Normalize
|
||||
if(ronin.frame.zoom.offset.x > 0){ ronin.frame.zoom.offset.x = 0; }
|
||||
if(ronin.frame.zoom.offset.y > 0){ ronin.frame.zoom.offset.y = 0; }
|
||||
if (ronin.frame.zoom.offset.x > 0) { ronin.frame.zoom.offset.x = 0 }
|
||||
if (ronin.frame.zoom.offset.y > 0) { ronin.frame.zoom.offset.y = 0 }
|
||||
|
||||
ronin.frame.el.style.top = `${ronin.frame.zoom.offset.y}px`;
|
||||
ronin.frame.el.style.left = `${ronin.frame.zoom.offset.x}px`;
|
||||
});
|
||||
ronin.frame.el.style.top = `${ronin.frame.zoom.offset.y}px`
|
||||
ronin.frame.el.style.left = `${ronin.frame.zoom.offset.x}px`
|
||||
})
|
||||
|
||||
this.resize_to = function(size)
|
||||
{
|
||||
this.el.style.width = `${size.width}px`;
|
||||
this.el.style.height = `${size.height}px`;
|
||||
ronin.frame.width = size.width;
|
||||
ronin.frame.height = size.height;
|
||||
this.resize_to = function (size) {
|
||||
this.el.style.width = `${size.width}px`
|
||||
this.el.style.height = `${size.height}px`
|
||||
ronin.frame.width = size.width
|
||||
ronin.frame.height = size.height
|
||||
|
||||
const {dialog,app} = require('electron').remote;
|
||||
var win = require('electron').remote.getCurrentWindow();
|
||||
win.setSize(size.width,size.height);
|
||||
ronin.layers.above.resize_to(size);
|
||||
ronin.layers.below.resize_to(size);
|
||||
ronin.guide.resize_to(size);
|
||||
const { dialog, app } = require('electron').remote
|
||||
var win = require('electron').remote.getCurrentWindow()
|
||||
win.setSize(size.width, size.height)
|
||||
ronin.layers.above.resize_to(size)
|
||||
ronin.layers.below.resize_to(size)
|
||||
ronin.guide.resize_to(size)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,137 +1,131 @@
|
||||
function IO()
|
||||
{
|
||||
Module.call(this,"io","File import/export tools.");
|
||||
|
||||
this.image = null;
|
||||
function IO () {
|
||||
Module.call(this, 'io', 'File import/export tools.')
|
||||
|
||||
this.methods.open = new Method("open","browser","Press enter to open the file browser.",function(q){
|
||||
var filepath = q ? [q] : dialog.showOpenDialog({properties: ['openFile']});
|
||||
this.image = null
|
||||
|
||||
if(!filepath){ console.log("Nothing to load"); return; }
|
||||
this.methods.open = new Method('open', 'browser', 'Press enter to open the file browser.', function (q) {
|
||||
var filepath = q ? [q] : dialog.showOpenDialog({ properties: ['openFile'] })
|
||||
|
||||
if (!filepath) { console.log('Nothing to load'); return }
|
||||
|
||||
fs.readFile(filepath[0], 'utf-8', (err, data) => {
|
||||
if(err){ alert("An error ocurred reading the file :" + err.message); return; }
|
||||
var img = new Image();
|
||||
img.src = filepath[0];
|
||||
img.onload = function() {
|
||||
var width = parseInt(img.naturalWidth * 0.5);
|
||||
var height = parseInt(img.naturalHeight * 0.5);
|
||||
ronin.frame.resize_to({width:width,height:height});
|
||||
ronin.io.draw_image(ronin.cursor.target.context(),img,{x:0,y:0,width:width,height:height});
|
||||
if (err) { alert('An error ocurred reading the file :' + err.message); return }
|
||||
var img = new Image()
|
||||
img.src = filepath[0]
|
||||
img.onload = function () {
|
||||
var width = parseInt(img.naturalWidth * 0.5)
|
||||
var height = parseInt(img.naturalHeight * 0.5)
|
||||
ronin.frame.resize_to({ width: width, height: height })
|
||||
ronin.io.draw_image(ronin.cursor.target.context(), img, { x: 0, y: 0, width: width, height: height })
|
||||
}
|
||||
});
|
||||
})
|
||||
})
|
||||
|
||||
this.methods.load = new Method("load","browser","Press enter to open the file browser.",function(q){
|
||||
var filepath = q ? [q] : dialog.showOpenDialog({properties: ['openFile']});
|
||||
this.methods.load = new Method('load', 'browser', 'Press enter to open the file browser.', function (q) {
|
||||
var filepath = q ? [q] : dialog.showOpenDialog({ properties: ['openFile'] })
|
||||
|
||||
if(!filepath){ console.log("Nothing to load"); return; }
|
||||
if (!filepath) { console.log('Nothing to load'); return }
|
||||
|
||||
fs.readFile(filepath[0], 'utf-8', (err, data) => {
|
||||
if(err){ alert("An error ocurred reading the file :" + err.message); return; }
|
||||
var img = new Image();
|
||||
img.src = filepath[0];
|
||||
img.onload = function() {
|
||||
ronin.io.image = img;
|
||||
ronin.commander.inject("io draw:20,20|100x100");
|
||||
if (err) { alert('An error ocurred reading the file :' + err.message); return }
|
||||
var img = new Image()
|
||||
img.src = filepath[0]
|
||||
img.onload = function () {
|
||||
ronin.io.image = img
|
||||
ronin.commander.inject('io draw:20,20|100x100')
|
||||
}
|
||||
});
|
||||
});
|
||||
})
|
||||
})
|
||||
|
||||
this.methods.render = new Method("render","png","Export canvas.",function(q){
|
||||
var ext = "png";
|
||||
var fs = require('fs');
|
||||
var data = ronin.io.render().to_base64(ext).replace(/^data:image\/\w+;base64,/, "");
|
||||
var buf = new Buffer(data, 'base64');
|
||||
this.methods.render = new Method('render', 'png', 'Export canvas.', function (q) {
|
||||
var ext = 'png'
|
||||
var fs = require('fs')
|
||||
var data = ronin.io.render().to_base64(ext).replace(/^data:image\/\w+;base64,/, '')
|
||||
var buf = new Buffer(data, 'base64')
|
||||
|
||||
dialog.showSaveDialog((fileName) => {
|
||||
if (fileName === undefined){ return; }
|
||||
fs.writeFile(fileName+'.'+ext, buf);
|
||||
});
|
||||
});
|
||||
if (fileName === undefined) { return }
|
||||
fs.writeFile(fileName + '.' + ext, buf)
|
||||
})
|
||||
})
|
||||
|
||||
this.methods.export = new Method("render","jpg","Export canvas.",function(q){
|
||||
var ext = "jpg";
|
||||
var fs = require('fs');
|
||||
var data = ronin.io.render(ronin.frame.background).to_base64(ext).replace(/^data:image\/\w+;base64,/, "");
|
||||
var buf = new Buffer(data, 'base64');
|
||||
this.methods.export = new Method('render', 'jpg', 'Export canvas.', function (q) {
|
||||
var ext = 'jpg'
|
||||
var fs = require('fs')
|
||||
var data = ronin.io.render(ronin.frame.background).to_base64(ext).replace(/^data:image\/\w+;base64,/, '')
|
||||
var buf = new Buffer(data, 'base64')
|
||||
|
||||
dialog.showSaveDialog((fileName) => {
|
||||
if (fileName === undefined){ return; }
|
||||
fs.writeFile(fileName+'.'+ext, buf);
|
||||
});
|
||||
});
|
||||
if (fileName === undefined) { return }
|
||||
fs.writeFile(fileName + '.' + ext, buf)
|
||||
})
|
||||
})
|
||||
|
||||
this.methods.draw = new Method("draw","X,Y|WxH","Draw the loaded image pixels.",function(q){
|
||||
if(!ronin.io.image){ return; }
|
||||
this.methods.draw = new Method('draw', 'X,Y|WxH', 'Draw the loaded image pixels.', function (q) {
|
||||
if (!ronin.io.image) { return }
|
||||
|
||||
ronin.io.draw_image(ronin.cursor.target.context(), ronin.io.image, ronin.commander.query().methods.draw)
|
||||
ronin.io.image = null
|
||||
})
|
||||
|
||||
ronin.io.draw_image(ronin.cursor.target.context(),ronin.io.image,ronin.commander.query().methods.draw);
|
||||
ronin.io.image = null;
|
||||
});
|
||||
|
||||
// this.preview = function(q)
|
||||
// {
|
||||
// ronin.preview.clear();
|
||||
|
||||
// if(ronin.commander.query().methods.draw && this.image){
|
||||
// this.draw_image(ronin.preview.context(),this.image,ronin.commander.query().methods.draw);
|
||||
// this.draw_image(ronin.preview.context(),this.image,ronin.commander.query().methods.draw);
|
||||
// }
|
||||
// }
|
||||
|
||||
this.render = function(fill = null)
|
||||
{
|
||||
var export_layer = new Layer();
|
||||
this.render = function (fill = null) {
|
||||
var export_layer = new Layer()
|
||||
|
||||
export_layer.el.width = ronin.frame.width * 2;
|
||||
export_layer.el.height = ronin.frame.height * 2;
|
||||
export_layer.el.width = ronin.frame.width * 2
|
||||
export_layer.el.height = ronin.frame.height * 2
|
||||
|
||||
if(fill){
|
||||
export_layer.fill(fill);
|
||||
if (fill) {
|
||||
export_layer.fill(fill)
|
||||
}
|
||||
export_layer.context().drawImage(ronin.layers.below.el,0,0)
|
||||
export_layer.context().drawImage(ronin.layers.above.el,0,0)
|
||||
return export_layer;
|
||||
export_layer.context().drawImage(ronin.layers.below.el, 0, 0)
|
||||
export_layer.context().drawImage(ronin.layers.above.el, 0, 0)
|
||||
return export_layer
|
||||
}
|
||||
|
||||
this.draw_image = function(ctx,img,params)
|
||||
{
|
||||
var width = parseInt(img.naturalWidth * 0.5);
|
||||
var height = parseInt(img.naturalHeight * 0.5);
|
||||
this.draw_image = function (ctx, img, params) {
|
||||
var width = parseInt(img.naturalWidth * 0.5)
|
||||
var height = parseInt(img.naturalHeight * 0.5)
|
||||
|
||||
var scale = params.width > params.height ? (params.width/width) * 2 : (params.height/height) * 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);
|
||||
ctx.drawImage(img, params.x * 2, params.y * 2, width * scale, height * scale)
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('dragover',function(e)
|
||||
{
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
e.dataTransfer.dropEffect = 'copy';
|
||||
});
|
||||
window.addEventListener('dragover', function (e) {
|
||||
e.stopPropagation()
|
||||
e.preventDefault()
|
||||
e.dataTransfer.dropEffect = 'copy'
|
||||
})
|
||||
|
||||
window.addEventListener('drop', function(e)
|
||||
{
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
window.addEventListener('drop', function (e) {
|
||||
e.stopPropagation()
|
||||
e.preventDefault()
|
||||
|
||||
var files = e.dataTransfer.files;
|
||||
var file = files[0];
|
||||
var path = file.path ? file.path : file.name;
|
||||
var files = e.dataTransfer.files
|
||||
var file = files[0]
|
||||
var path = file.path ? file.path : file.name
|
||||
|
||||
if(path.substr(-4,4) == ".thm"){ return; }
|
||||
|
||||
if (file.type && !file.type.match(/image.*/)) { console.log("Not image", file.type); return false; }
|
||||
if (path.substr(-4, 4) == '.thm') { return }
|
||||
|
||||
var reader = new FileReader();
|
||||
if (file.type && !file.type.match(/image.*/)) { console.log('Not image', file.type); return false }
|
||||
|
||||
reader.onload = function(event)
|
||||
{
|
||||
var img = new Image();
|
||||
img.src = event.target.result;
|
||||
ronin.io.image = img;
|
||||
ronin.commander.inject("io draw:20,20|100x100");
|
||||
var reader = new FileReader()
|
||||
|
||||
reader.onload = function (event) {
|
||||
var img = new Image()
|
||||
img.src = event.target.result
|
||||
ronin.io.image = img
|
||||
ronin.commander.inject('io draw:20,20|100x100')
|
||||
}
|
||||
reader.readAsDataURL(file);
|
||||
});
|
||||
reader.readAsDataURL(file)
|
||||
})
|
||||
|
||||
@@ -1,76 +1,69 @@
|
||||
function Line()
|
||||
{
|
||||
Module.call(this,"line","Drawing lines. Tween expects something in the `$&$>>$&$` format.");
|
||||
function Line () {
|
||||
Module.call(this, 'line', 'Drawing lines. Tween expects something in the `$&$>>$&$` format.')
|
||||
|
||||
this.ports.step = new Port(this,"step",false,true,0,100,"The tween line index.");
|
||||
this.ports.thickness = new Port(this,"thickness",true,true,1,100,"The tween line thickness.");
|
||||
this.ports.step = new Port(this, 'step', false, true, 0, 100, 'The tween line index.')
|
||||
this.ports.thickness = new Port(this, 'thickness', true, true, 1, 100, 'The tween line thickness.')
|
||||
|
||||
this.methods.stroke = new Method("stroke","x1,y1&x2,y2","Stroke positions.",function(q){
|
||||
this.methods.stroke = new Method('stroke', 'x1,y1&x2,y2', 'Stroke positions.', function (q) {
|
||||
ronin.line.stroke_multi(q)
|
||||
})
|
||||
|
||||
this.methods.tween = new Method("tween","tween:$&$>>$&$ step->thickness","Stroke lines between strokes.",function(q){
|
||||
var from = q.from;
|
||||
var to = q.to;
|
||||
this.methods.tween = new Method('tween', 'tween:$&$>>$&$ step->thickness', 'Stroke lines between strokes.', function (q) {
|
||||
var from = q.from
|
||||
var to = q.to
|
||||
|
||||
ronin.line.ports.step.write(0);
|
||||
while(ronin.line.ports.step.value < ronin.line.ports.step.max){
|
||||
var progress = ronin.line.ports.step.value/parseFloat(ronin.line.ports.step.max);
|
||||
var new_positions = tween_positions(from,to,progress);
|
||||
ronin.line.stroke_multi(new_positions);
|
||||
ronin.line.ports.step.write(ronin.line.ports.step.value+1);
|
||||
ronin.line.ports.step.write(0)
|
||||
while (ronin.line.ports.step.value < ronin.line.ports.step.max) {
|
||||
var progress = ronin.line.ports.step.value / parseFloat(ronin.line.ports.step.max)
|
||||
var new_positions = tween_positions(from, to, progress)
|
||||
ronin.line.stroke_multi(new_positions)
|
||||
ronin.line.ports.step.write(ronin.line.ports.step.value + 1)
|
||||
}
|
||||
})
|
||||
|
||||
this.preview = function(q)
|
||||
{
|
||||
this.preview = function (q) {
|
||||
// TODO
|
||||
// console.log(q);
|
||||
}
|
||||
|
||||
this.stroke_multi = function(coordinates)
|
||||
{
|
||||
var from = coordinates[0];
|
||||
for(pos_id in coordinates){
|
||||
var pos = coordinates[pos_id];
|
||||
ronin.line.stroke(from,pos);
|
||||
from = pos;
|
||||
this.stroke_multi = function (coordinates) {
|
||||
var from = coordinates[0]
|
||||
for (pos_id in coordinates) {
|
||||
var pos = coordinates[pos_id]
|
||||
ronin.line.stroke(from, pos)
|
||||
from = pos
|
||||
}
|
||||
}
|
||||
|
||||
this.stroke = function(from,to,ctx = ronin.cursor.target.context())
|
||||
{
|
||||
ctx.beginPath();
|
||||
ctx.globalCompositeOperation="source-over";
|
||||
ctx.moveTo((from.x * 2),(from.y * 2));
|
||||
ctx.lineTo((to.x * 2),(to.y * 2));
|
||||
ctx.lineCap="round";
|
||||
ctx.lineWidth = clamp(ronin.line.ports.thickness.value,1,200) * 0.1;
|
||||
ctx.strokeStyle = "#000";
|
||||
ctx.stroke();
|
||||
ctx.closePath();
|
||||
}
|
||||
|
||||
function clamp(v, min, max)
|
||||
{
|
||||
return v < min ? min : v > max ? max : v;
|
||||
this.stroke = function (from, to, ctx = ronin.cursor.target.context()) {
|
||||
ctx.beginPath()
|
||||
ctx.globalCompositeOperation = 'source-over'
|
||||
ctx.moveTo((from.x * 2), (from.y * 2))
|
||||
ctx.lineTo((to.x * 2), (to.y * 2))
|
||||
ctx.lineCap = 'round'
|
||||
ctx.lineWidth = clamp(ronin.line.ports.thickness.value, 1, 200) * 0.1
|
||||
ctx.strokeStyle = '#000'
|
||||
ctx.stroke()
|
||||
ctx.closePath()
|
||||
}
|
||||
|
||||
function tween_positions(froms,tos,progress)
|
||||
{
|
||||
var a = [];
|
||||
for(pos_id in froms){
|
||||
var from = froms[pos_id];
|
||||
var to = tos[pos_id];
|
||||
a.push(tween_position(from,to,progress));
|
||||
function clamp (v, min, max) {
|
||||
return v < min ? min : v > max ? max : v
|
||||
}
|
||||
|
||||
function tween_positions (froms, tos, progress) {
|
||||
var a = []
|
||||
for (pos_id in froms) {
|
||||
var from = froms[pos_id]
|
||||
var to = tos[pos_id]
|
||||
a.push(tween_position(from, to, progress))
|
||||
}
|
||||
|
||||
return a;
|
||||
return a
|
||||
}
|
||||
|
||||
function tween_position(from,to,progress)
|
||||
{
|
||||
var offset = {x:to.x - from.x,y:to.y - from.y};
|
||||
return {x:from.x + offset.x * progress,y:from.y + offset.y * progress};
|
||||
function tween_position (from, to, progress) {
|
||||
var offset = { x: to.x - from.x, y: to.y - from.y }
|
||||
return { x: from.x + offset.x * progress, y: from.y + offset.y * progress }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,29 +1,27 @@
|
||||
function Magnet()
|
||||
{
|
||||
Module.call(this,"magnet","Cursor magnetisation settings, changes are reflected on the grid layer.");
|
||||
function Magnet () {
|
||||
Module.call(this, 'magnet', 'Cursor magnetisation settings, changes are reflected on the grid layer.')
|
||||
|
||||
this.size = 0;
|
||||
this.step = 4;
|
||||
this.size = 0
|
||||
this.step = 4
|
||||
|
||||
this.methods.lock = new Method("lock","10","Magnetize cursor",function(q){
|
||||
var size = parseInt(q);
|
||||
if(size < 5){ this.unlock(); return; }
|
||||
ronin.magnet.size = size;
|
||||
ronin.grid.draw(size,ronin.magnet.step);
|
||||
this.methods.lock = new Method('lock', '10', 'Magnetize cursor', function (q) {
|
||||
var size = parseInt(q)
|
||||
if (size < 5) { this.unlock(); return }
|
||||
ronin.magnet.size = size
|
||||
ronin.grid.draw(size, ronin.magnet.step)
|
||||
})
|
||||
|
||||
this.methods.unlock = new Method("unlock","","Release cursor",function(q){
|
||||
ronin.magnet.size = 0;
|
||||
ronin.grid.clear();
|
||||
this.methods.unlock = new Method('unlock', '', 'Release cursor', function (q) {
|
||||
ronin.magnet.size = 0
|
||||
ronin.grid.clear()
|
||||
})
|
||||
|
||||
this.filter = function(pos)
|
||||
{
|
||||
if(this.size < 5){
|
||||
return pos;
|
||||
this.filter = function (pos) {
|
||||
if (this.size < 5) {
|
||||
return pos
|
||||
}
|
||||
|
||||
var s = this.size;
|
||||
return {x:parseInt(pos.x/s)*s,y:parseInt(pos.y/s)*s};
|
||||
var s = this.size
|
||||
return { x: parseInt(pos.x / s) * s, y: parseInt(pos.y / s) * s }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,97 +1,90 @@
|
||||
function Path()
|
||||
{
|
||||
Module.call(this,"path","Trace lines and draw shapes.");
|
||||
function Path () {
|
||||
Module.call(this, 'path', 'Trace lines and draw shapes.')
|
||||
|
||||
this.settings = {cap:"square"};
|
||||
|
||||
this.methods.stroke = new Method("stroke","x,y&","",function(q){
|
||||
ronin.preview.clear();
|
||||
this.settings = { cap: 'square' }
|
||||
|
||||
var path = ronin.path.create_path(q);
|
||||
this.methods.stroke = new Method('stroke', 'x,y&', '', function (q) {
|
||||
ronin.preview.clear()
|
||||
|
||||
var ctx = ronin.cursor.target.context();
|
||||
var path = ronin.path.create_path(q)
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.lineCap = ronin.path.settings.cap;
|
||||
ctx.lineWidth = ronin.cursor.size;
|
||||
ctx.strokeStyle = ronin.cursor.color;
|
||||
ctx.stroke(new Path2D(path));
|
||||
ctx.closePath();
|
||||
});
|
||||
var ctx = ronin.cursor.target.context()
|
||||
|
||||
this.methods.fill = new Method("fill","x,y&","",function(q){
|
||||
ronin.preview.clear();
|
||||
ctx.beginPath()
|
||||
ctx.lineCap = ronin.path.settings.cap
|
||||
ctx.lineWidth = ronin.cursor.size
|
||||
ctx.strokeStyle = ronin.cursor.color
|
||||
ctx.stroke(new Path2D(path))
|
||||
ctx.closePath()
|
||||
})
|
||||
|
||||
var path = ronin.path.create_path(q);
|
||||
this.methods.fill = new Method('fill', 'x,y&', '', function (q) {
|
||||
ronin.preview.clear()
|
||||
|
||||
var ctx = ronin.cursor.target.context();
|
||||
var path = ronin.path.create_path(q)
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.lineCap = ronin.path.settings.cap;
|
||||
ctx.lineWidth = ronin.cursor.size;
|
||||
ctx.fillStyle = ronin.cursor.color;
|
||||
ctx.fill(new Path2D(path));
|
||||
ctx.closePath();
|
||||
});
|
||||
var ctx = ronin.cursor.target.context()
|
||||
|
||||
this.methods.svg = new Method("svg","M0,0 L100,100","",function(q){
|
||||
var path = ronin.commander.query().raw.replace("svg:","").trim();
|
||||
var ctx = ronin.cursor.target.context();
|
||||
ctx.beginPath();
|
||||
ctx.lineCap = ronin.path.settings.cap;
|
||||
ctx.lineWidth = ronin.cursor.size;
|
||||
ctx.strokeStyle = ronin.cursor.color;
|
||||
ctx.stroke(new Path2D(path));
|
||||
ctx.closePath();
|
||||
});
|
||||
ctx.beginPath()
|
||||
ctx.lineCap = ronin.path.settings.cap
|
||||
ctx.lineWidth = ronin.cursor.size
|
||||
ctx.fillStyle = ronin.cursor.color
|
||||
ctx.fill(new Path2D(path))
|
||||
ctx.closePath()
|
||||
})
|
||||
|
||||
this.preview = function(q)
|
||||
{
|
||||
if(!q.methods.stroke){ return; }
|
||||
this.methods.svg = new Method('svg', 'M0,0 L100,100', '', function (q) {
|
||||
var path = ronin.commander.query().raw.replace('svg:', '').trim()
|
||||
var ctx = ronin.cursor.target.context()
|
||||
ctx.beginPath()
|
||||
ctx.lineCap = ronin.path.settings.cap
|
||||
ctx.lineWidth = ronin.cursor.size
|
||||
ctx.strokeStyle = ronin.cursor.color
|
||||
ctx.stroke(new Path2D(path))
|
||||
ctx.closePath()
|
||||
})
|
||||
|
||||
ronin.preview.clear();
|
||||
var path = ronin.path.create_path(q.methods.stroke);
|
||||
this.preview = function (q) {
|
||||
if (!q.methods.stroke) { return }
|
||||
|
||||
var ctx = ronin.preview.context();
|
||||
ctx.beginPath();
|
||||
ctx.lineCap = ronin.path.settings.cap;
|
||||
ctx.lineWidth = ronin.cursor.size;
|
||||
ctx.strokeStyle = ronin.cursor.color;
|
||||
ctx.stroke(new Path2D(path));
|
||||
ctx.closePath();
|
||||
ronin.preview.clear()
|
||||
var path = ronin.path.create_path(q.methods.stroke)
|
||||
|
||||
var ctx = ronin.preview.context()
|
||||
ctx.beginPath()
|
||||
ctx.lineCap = ronin.path.settings.cap
|
||||
ctx.lineWidth = ronin.cursor.size
|
||||
ctx.strokeStyle = ronin.cursor.color
|
||||
ctx.stroke(new Path2D(path))
|
||||
ctx.closePath()
|
||||
}
|
||||
|
||||
this.create_path = function(q_array)
|
||||
{
|
||||
var svg_path = "";
|
||||
var prev = {x:0,y:0};
|
||||
for(q_id in q_array){
|
||||
var coord = q_array[q_id];
|
||||
if(!coord.x || !coord.y){ continue; }
|
||||
coord.x *= 2; coord.y *= 2;
|
||||
if(svg_path == ""){
|
||||
var origin = {x:coord.x,y:coord.y};
|
||||
svg_path += "M"+(coord.x)+","+(coord.y)+" ";
|
||||
this.create_path = function (q_array) {
|
||||
var svg_path = ''
|
||||
var prev = { x: 0, y: 0 }
|
||||
for (q_id in q_array) {
|
||||
var coord = q_array[q_id]
|
||||
if (!coord.x || !coord.y) { continue }
|
||||
coord.x *= 2; coord.y *= 2
|
||||
if (svg_path == '') {
|
||||
var origin = { x: coord.x, y: coord.y }
|
||||
svg_path += 'M' + (coord.x) + ',' + (coord.y) + ' '
|
||||
} else if (coord.clockwise == true) {
|
||||
var offset = make_offset(coord, prev)
|
||||
svg_path += 'a' + (offset.x) + ',' + (offset.y) + ' 0 0,1 ' + (offset.x) + ',' + (offset.y)
|
||||
} else if (coord.clockwise == false) {
|
||||
var offset = make_offset(coord, prev)
|
||||
svg_path += 'a' + (offset.x) + ',' + (offset.y) + ' 0 0,0 ' + (offset.x) + ',' + (offset.y)
|
||||
} else {
|
||||
var offset = make_offset(coord, prev)
|
||||
svg_path += 'l' + (offset.x) + ',' + (offset.y) + ' '
|
||||
}
|
||||
else if(coord.clockwise == true){
|
||||
var offset = make_offset(coord,prev);
|
||||
svg_path += "a"+(offset.x)+","+(offset.y)+" 0 0,1 "+(offset.x)+","+(offset.y);
|
||||
}
|
||||
else if(coord.clockwise == false){
|
||||
var offset = make_offset(coord,prev);
|
||||
svg_path += "a"+(offset.x)+","+(offset.y)+" 0 0,0 "+(offset.x)+","+(offset.y);
|
||||
}
|
||||
else{
|
||||
var offset = make_offset(coord,prev);
|
||||
svg_path += "l"+(offset.x)+","+(offset.y)+" ";
|
||||
}
|
||||
prev = coord;
|
||||
prev = coord
|
||||
}
|
||||
return svg_path;
|
||||
return svg_path
|
||||
}
|
||||
|
||||
function make_offset(a,b)
|
||||
{
|
||||
return {x:a.x-b.x,y:a.y-b.y};
|
||||
function make_offset (a, b) {
|
||||
return { x: a.x - b.x, y: a.y - b.y }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,31 +1,28 @@
|
||||
function Type()
|
||||
{
|
||||
Module.call(this,"type");
|
||||
function Type () {
|
||||
Module.call(this, 'type')
|
||||
|
||||
this.settings = {color:"#000000",font:"Gotham Light",anchor:"center"}
|
||||
this.settings = { color: '#000000', font: 'Gotham Light', anchor: 'center' }
|
||||
|
||||
this.methods.write = new Method("write","text&x,y|WxH","Draw text",function(q){
|
||||
|
||||
var rect = q[1];
|
||||
this.methods.write = new Method('write', 'text&x,y|WxH', 'Draw text', function (q) {
|
||||
var rect = q[1]
|
||||
var size = rect.height * 2
|
||||
ronin.preview.clear();
|
||||
ronin.preview.clear()
|
||||
|
||||
ronin.cursor.target.context().textAlign = ronin.type.settings.anchor;
|
||||
ronin.cursor.target.context().font = size+"px "+ronin.type.settings.font.replace("+"," ");
|
||||
ronin.cursor.target.context().fillText(q[0].replace("+"," "),rect.x * 2,(rect.y * 2)+size);
|
||||
ronin.cursor.target.context().textAlign = ronin.type.settings.anchor
|
||||
ronin.cursor.target.context().font = size + 'px ' + ronin.type.settings.font.replace('+', ' ')
|
||||
ronin.cursor.target.context().fillText(q[0].replace('+', ' '), rect.x * 2, (rect.y * 2) + size)
|
||||
})
|
||||
|
||||
this.preview = function(q)
|
||||
{
|
||||
if(!q.methods.write || !q.methods.write[1]){ return; }
|
||||
this.preview = function (q) {
|
||||
if (!q.methods.write || !q.methods.write[1]) { return }
|
||||
|
||||
var rect = q.methods.write[1];
|
||||
var rect = q.methods.write[1]
|
||||
var size = rect.height * 2
|
||||
|
||||
ronin.preview.clear();
|
||||
|
||||
ronin.preview.context().textAlign = this.settings.anchor;
|
||||
ronin.preview.context().font = size+"px "+this.settings.font.replace("+"," ");
|
||||
ronin.preview.context().fillText(q.methods.write[0].replace("+"," "),rect.x * 2,(rect.y * 2)+size);
|
||||
ronin.preview.clear()
|
||||
|
||||
ronin.preview.context().textAlign = this.settings.anchor
|
||||
ronin.preview.context().font = size + 'px ' + this.settings.font.replace('+', ' ')
|
||||
ronin.preview.context().fillText(q.methods.write[0].replace('+', ' '), rect.x * 2, (rect.y * 2) + size)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user