Minor cleanup.
This commit is contained in:
parent
7dbfbd748f
commit
58ce66d4dc
@ -23,7 +23,7 @@
|
|||||||
<body>
|
<body>
|
||||||
<div id='ronin'>
|
<div id='ronin'>
|
||||||
<canvas id='overlay' width="1280" height="800"></canvas>
|
<canvas id='overlay' width="1280" height="800"></canvas>
|
||||||
<canvas id="myCanvas" width="1280" height="800" style="background:#efefef"></canvas>
|
<canvas id="workspace" width="1280" height="800" style="background:#efefef"></canvas>
|
||||||
<div id ='commander'>
|
<div id ='commander'>
|
||||||
<div id='commander_hint'>Hey</div>
|
<div id='commander_hint'>Hey</div>
|
||||||
<input id='commander_input'/>
|
<input id='commander_input'/>
|
||||||
|
@ -86,6 +86,9 @@ function Commander(element,element_input)
|
|||||||
ronin.zoom.passive(this.cmd);
|
ronin.zoom.passive(this.cmd);
|
||||||
ronin.module = ronin.zoom;
|
ronin.module = ronin.zoom;
|
||||||
break;
|
break;
|
||||||
|
case "$":
|
||||||
|
ronin.module = ronin.file;
|
||||||
|
break;
|
||||||
case ":":
|
case ":":
|
||||||
ronin.filter.passive(this.cmd);
|
ronin.filter.passive(this.cmd);
|
||||||
ronin.module = ronin.filter;
|
ronin.module = ronin.filter;
|
||||||
|
@ -1,31 +1,20 @@
|
|||||||
var canvas = document.getElementById('myCanvas');
|
|
||||||
var context = canvas.getContext('2d');
|
// Juchecore
|
||||||
|
|
||||||
var ronin = new Ronin();
|
var ronin = new Ronin();
|
||||||
ronin.canvas.element = canvas;
|
ronin.canvas.element = document.getElementById('workspace');
|
||||||
|
|
||||||
ronin.overlay.element = document.getElementById('overlay');
|
ronin.overlay.element = document.getElementById('overlay');
|
||||||
ronin.overlay.context().imageSmoothingEnabled = false;
|
|
||||||
|
|
||||||
|
|
||||||
ronin.hint.element = document.getElementById('commander_hint');
|
ronin.hint.element = document.getElementById('commander_hint');
|
||||||
|
|
||||||
ronin.element = document.getElementById('ronin');
|
|
||||||
|
|
||||||
var commander = new Commander(document.getElementById("commander"),document.getElementById("commander_input"));
|
var commander = new Commander(document.getElementById("commander"),document.getElementById("commander_input"));
|
||||||
|
|
||||||
document.addEventListener('mousemove', function(e) {
|
// Interactive
|
||||||
ronin.brush.draw(e);
|
|
||||||
}, false);
|
|
||||||
|
|
||||||
document.addEventListener('mousedown', function(e) {
|
document.addEventListener('mousemove', function(e) { ronin.brush.draw(e); }, false);
|
||||||
if(e.which != 1){ return; }
|
document.addEventListener('mousedown', function(e) { if(e.which != 1){ return; } ronin.brush.draw_start(e); }, false);
|
||||||
ronin.brush.draw_start(e);
|
document.addEventListener('mouseup', function(e) { ronin.brush.draw_stop(e); }, false);
|
||||||
}, false);
|
|
||||||
|
|
||||||
document.addEventListener('mouseup', function(e) {
|
|
||||||
ronin.brush.draw_stop(e);
|
|
||||||
}, false);
|
|
||||||
|
|
||||||
var keyboard = new Keyboard();
|
var keyboard = new Keyboard();
|
||||||
document.onkeyup = function myFunction(){ keyboard.listen(event); };
|
document.onkeyup = function myFunction(){ keyboard.listen(event); };
|
||||||
|
|
||||||
|
// Done.
|
||||||
|
@ -17,21 +17,21 @@ function Pointer(offset = new Position(), color = new Color('000000'))
|
|||||||
position.y += (Math.random() * this.noise) - (this.noise/2);
|
position.y += (Math.random() * this.noise) - (this.noise/2);
|
||||||
}
|
}
|
||||||
|
|
||||||
context.beginPath();
|
ronin.canvas.context().beginPath();
|
||||||
context.moveTo(this.position_prev.x,this.position_prev.y);
|
ronin.canvas.context().moveTo(this.position_prev.x,this.position_prev.y);
|
||||||
context.lineTo(position.x,position.y);
|
ronin.canvas.context().lineTo(position.x,position.y);
|
||||||
context.lineCap="round";
|
ronin.canvas.context().lineCap="round";
|
||||||
context.lineWidth = this.thickness();
|
ronin.canvas.context().lineWidth = this.thickness();
|
||||||
context.strokeStyle = ronin.brush.color.rgba();
|
ronin.canvas.context().strokeStyle = ronin.brush.color.rgba();
|
||||||
context.stroke();
|
ronin.canvas.context().stroke();
|
||||||
context.closePath();
|
ronin.canvas.context().closePath();
|
||||||
|
|
||||||
this.position_prev = position;
|
this.position_prev = position;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.erase = function()
|
this.erase = function()
|
||||||
{
|
{
|
||||||
context.clearRect(this.position().x - (ronin.brush.size/2), this.position().y - (ronin.brush.size/2), ronin.brush.size, ronin.brush.size);
|
ronin.canvas.context().clearRect(this.position().x - (ronin.brush.size/2), this.position().y - (ronin.brush.size/2), ronin.brush.size, ronin.brush.size);
|
||||||
}
|
}
|
||||||
|
|
||||||
this.thickness = function()
|
this.thickness = function()
|
||||||
|
@ -6,7 +6,7 @@ function Canvas(element)
|
|||||||
|
|
||||||
this.active = function(cmd)
|
this.active = function(cmd)
|
||||||
{
|
{
|
||||||
if(cmd.bang()){ this.context().clearRect(0, 0, canvas.width, canvas.height); }
|
if(cmd.bang()){ this.context().clearRect(0, 0, this.element.width, this.element.height); }
|
||||||
|
|
||||||
if(cmd.rect()){
|
if(cmd.rect()){
|
||||||
this.resize(cmd.rect());
|
this.resize(cmd.rect());
|
||||||
@ -15,7 +15,7 @@ function Canvas(element)
|
|||||||
|
|
||||||
if(cmd.color()){
|
if(cmd.color()){
|
||||||
this.context().beginPath();
|
this.context().beginPath();
|
||||||
this.context().rect(0, 0, canvas.width, canvas.height);
|
this.context().rect(0, 0, this.element.width, this.element.height);
|
||||||
this.context().fillStyle = cmd.color().hex;
|
this.context().fillStyle = cmd.color().hex;
|
||||||
this.context().fill();
|
this.context().fill();
|
||||||
}
|
}
|
||||||
|
@ -20,7 +20,7 @@ function File()
|
|||||||
base_image.src = cmd.value() && this.storage[cmd.value()] ? this.storage[cmd.value()] : cmd.path();
|
base_image.src = cmd.value() && this.storage[cmd.value()] ? this.storage[cmd.value()] : cmd.path();
|
||||||
base_image.onload = function(){
|
base_image.onload = function(){
|
||||||
position.normalize(cmd.rect());
|
position.normalize(cmd.rect());
|
||||||
context.drawImage(base_image, position.x, position.y, cmd.rect().width, cmd.rect().height);
|
ronin.canvas.context().drawImage(base_image, position.x, position.y, cmd.rect().width, cmd.rect().height);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -50,11 +50,11 @@ function File()
|
|||||||
this.save = function(cmd)
|
this.save = function(cmd)
|
||||||
{
|
{
|
||||||
if(cmd.value() > 0){
|
if(cmd.value() > 0){
|
||||||
this.storage[cmd.value()] = canvas.toDataURL("image/png");
|
this.storage[cmd.value()] = ronin.canvas.element.toDataURL("image/png");
|
||||||
}
|
}
|
||||||
else{
|
else{
|
||||||
var d=canvas.toDataURL("image/png");
|
var d = ronin.canvas.element.toDataURL("image/png");
|
||||||
var w=window.open('about:blank','image from canvas');
|
var w = window.open('about:blank','image from canvas');
|
||||||
w.document.write("<title>"+(cmd.cmd_array[0] ? cmd.cmd_array[0] : "Untitled")+"</title><img src='"+d+"' alt='from canvas'/>");
|
w.document.write("<title>"+(cmd.cmd_array[0] ? cmd.cmd_array[0] : "Untitled")+"</title><img src='"+d+"' alt='from canvas'/>");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,6 +1,5 @@
|
|||||||
function Ronin()
|
function Ronin()
|
||||||
{
|
{
|
||||||
this.element = null;
|
|
||||||
this.canvas = new Canvas();
|
this.canvas = new Canvas();
|
||||||
this.overlay = new Overlay();
|
this.overlay = new Overlay();
|
||||||
this.brush = new Brush();
|
this.brush = new Brush();
|
||||||
|
@ -37,13 +37,13 @@ function Overlay(element)
|
|||||||
if(rect){
|
if(rect){
|
||||||
this.draw_rect(position,rect);
|
this.draw_rect(position,rect);
|
||||||
}
|
}
|
||||||
else if(position.x != 0 && position.y != 0){
|
else if(position.x !== 0 && position.y !== 0){
|
||||||
this.draw_pointer(position);
|
this.draw_pointer(position);
|
||||||
}
|
}
|
||||||
else if(position.x != 0 ){
|
else if(position.x !== 0 ){
|
||||||
this.draw_vertical_line(position);
|
this.draw_vertical_line(position);
|
||||||
}
|
}
|
||||||
else if(position.y != 0 ){
|
else if(position.y !== 0 ){
|
||||||
this.draw_horizontal_line(position);
|
this.draw_horizontal_line(position);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -142,6 +142,6 @@ function Overlay(element)
|
|||||||
|
|
||||||
this.clear = function()
|
this.clear = function()
|
||||||
{
|
{
|
||||||
this.context().clearRect(0, 0, canvas.width, canvas.height);
|
this.context().clearRect(0, 0, ronin.canvas.element.width, ronin.canvas.element.height);
|
||||||
}
|
}
|
||||||
}
|
}
|
Loading…
x
Reference in New Issue
Block a user