Skip to content

GitLab

Commit 48cc1850 authored by christian's avatar christian
Browse files

update

parent 2492f36c
Hide whitespace changes
Inline Side-by-side
js/image-manager.js
View file @ 48cc1850
function ImageManager(canvasId) {
if (typeof ImageManager.instance === 'object') { return ImageManager.instance; }
ImageManager.instance = this;
NONE = 0, MOVING = 1, SCALING = 2, ROTATING = 3;
this.mouseDown = false;
this.mousePrevX = 0;
this.mousePrevY = 0;this.selectedLayer = null;
this.layerState = NONE;
this.canvasOffsetX = 0;
this.canvasOffsetY = 0;
this.scaleImg = new Image();
this.rotateImg = new Image();
this.scaleImg.src = 'img/resize.png';
this.rotateImg.src = 'img/resize.png';
var canvas = canvasId;
var canvasOffsetX = canvas.offsetLeft;
var canvasOffsetY = canvas.offsetTop;
var context = canvas.getContext('2d');
var layers = new Array();
this.addLayer = function (img,src) {
var layer = new Layer(img,src);
layers.push(layer);
return layer;
}
this.redraw = function(){this.canvasManager.changeShape(false);}
this.getCanvas = function(){return canvas;}
this.getLayers = function() {return layers;}
this.getLayer = function(i) {return layers[i];}
this.isScalingArea = function (mX, mY, layer) {
var scaleOffsetX = layer.offsetX + layer.width;
var scaleOffsetY = layer.offsetY + layer.height;
var square = new Square(
new Vector(scaleOffsetX - this.scaleImg.width, scaleOffsetY - this.scaleImg.height),
new Vector(scaleOffsetX, scaleOffsetY - this.scaleImg.height),
new Vector(scaleOffsetX, scaleOffsetY),
new Vector(scaleOffsetX - this.scaleImg.width, scaleOffsetY));
square.rotate(layer.angle);
square.alignBottomRight(layer.getSquare().c);
return square.intersect(new Vector(mX, mY));
}
}
function Layer(img,src) {
this.src = src;
this.img = img;
this.offsetX =0;
this.offsetY = 0;
this.imgNaturalWidth = this.img.width;
this.imgNaturalHeight = this.img.height;
this.imgDimension = this.imgNaturalHeight < this.imgNaturalWidth ? 'imgLandscape' : 'imgPortrait';
this.width = this.imgNaturalWidth;
this.height = this.imgNaturalHeight;
this.canvas = document.createElement('canvas');
this.canvas.width = this.width;
this.canvas.height = this.height;
this.context = this.canvas.getContext('2d');
this.context.save();
this.context.translate(this.width / 2, this.height / 2);
this.opacity = 1;
this.visible = true;
this.angle = 0;
this.title = this.src.name;
this.compositeOperation = "source-over";
this.getTitle = function() {
return this.title;
}
this.getFileData = function () {
return this.src;
}
this.getImage = function () {
return this.img;
}
this.isVisible = function () {
return this.visible;
}
this.toggleVisible = function() {
this.visible = !this.visible;
}
this.setCompositeOperation = function (compositeOperation) {
this.compositeOperation = compositeOperation;
}
this.getCompositeOperation = function () {
return this.compositeOperation;
}
this.redraw = function () {
var startX = this.width / 2 - this.width;
var startY = this.height / 2 - this.height;
this.context.clearRect(startX, startY, this.canvas.width, this.canvas.height);
this.context.drawImage(this.img, startX, startY, this.width, this.height);
}
this.getCanvas = function () {
this.redraw();
return this.canvas;
}
this.intersect = function(x, y) {
var square = new Square(
new Vector(this.offsetX, this.offsetY),
new Vector(this.offsetX + this.width, this.offsetY),
new Vector(this.offsetX + this.width, this.offsetY + this.height),
new Vector(this.offsetX, this.offsetY + this.height));
square.rotate(this.angle);
return square.intersect(new Vector(x, y));
}
this.getSquare = function() {
var square = new Square(
new Vector(this.offsetX, this.offsetY),
new Vector(this.offsetX + this.width, this.offsetY),
new Vector(this.offsetX + this.width, this.offsetY + this.height),
new Vector(this.offsetX, this.offsetY + this.height));
square.rotate(this.angle);
return square;
}
this.scale = function(width, height) {
this.context.restore();
this.width = width;
this.height = height;
this.canvas.width = width;
this.canvas.height = height;
this.context.translate(this.width / 2, this.height / 2);
this.redraw();
}
this.setAngle = function(angle) {
this.angle = angle;
}
this.getAngle = function() {
return this.angle;
}
this.setTitle = function(title) {
this.title = title;
}
this.getTitle = function() {
return this.title;
}
}
/**Math from:
* http://bloggingmath.wordpress.com/2009/05/29/line-segment-intersection/
*/
function Square(a, b, c, d) {
this.a = a;
this.b = b;
this.c = c;
this.d = d;
this.origin = centerSquareOrigin(a,b,c,d);
this.intersect = function(mouse) {
return (!intersectWithLine(this.origin, mouse, this.a, this.b) &&
!intersectWithLine(this.origin, mouse, this.b, this.c) &&
!intersectWithLine(this.origin, mouse, this.c, this.d) &&
!intersectWithLine(this.origin, mouse, this.d, this.a));
}
this.rotate = function(angle) {
var radius = Math.sqrt(Math.pow(this.origin.x - this.a.x, 2) + Math.pow(this.origin.y - this.a.y, 2));
var aAngle = Math.atan2((this.a.y - this.origin.y), (this.a.x - this.origin.x));
var bAngle = Math.atan2((this.b.y - this.origin.y), (this.b.x - this.origin.x));
var cAngle = Math.atan2((this.c.y - this.origin.y), (this.c.x - this.origin.x));
var dAngle = Math.atan2((this.d.y - this.origin.y), (this.d.x - this.origin.x));
this.a.x = this.origin.x + radius * Math.cos(angle + aAngle);
this.a.y = this.origin.y + radius * Math.sin(angle + aAngle);
this.b.x = this.origin.x + radius * Math.cos(angle + bAngle);
this.b.y = this.origin.y + radius * Math.sin(angle + bAngle);
this.c.x = this.origin.x + radius * Math.cos(angle + cAngle);
this.c.y = this.origin.y + radius * Math.sin(angle + cAngle);
this.d.x = this.origin.x + radius * Math.cos(angle + dAngle);
this.d.y = this.origin.y + radius * Math.sin(angle + dAngle);
}
this.alignBottomRight = function(alignPoint) {
var diff = new Vector(alignPoint.x - this.c.x, alignPoint.y - this.c.y);
this.a = this.a.add(diff);
this.b = this.b.add(diff);
this.c = this.c.add(diff);
this.d = this.d.add(diff);
this.origin = centerSquareOrigin(this.a, this.b, this.c, this.d);
}
this.alignTopRight = function(alignPoint) {
var diff = new Vector(alignPoint.x - this.b.x, alignPoint.y - this.b.y);
this.a = this.a.add(diff);
this.b = this.b.add(diff);
this.c = this.c.add(diff);
this.d = this.d.add(diff);
this.origin = centerSquareOrigin(this.a, this.b, this.c, this.d);
}
var epsilon = 10e-6;
function centerSquareOrigin(a, b, c, d) {
p = a;
r = c.subtract(a);
q = b;
s = d.subtract(b);
rCrossS = cross(r, s);
if(rCrossS <= epsilon && rCrossS >= -1 * epsilon){
return;
}
t = cross(q.subtract(p), s)/rCrossS;
u = cross(q.subtract(p), r)/rCrossS;
if (0 <= u && u <= 1 && 0 <= t && t <= 1){
intPoint = p.add(r.scalarMult(t));
return new Vector(intPoint.x, intPoint.y);
}
return null;
}
function cross(v1, v2) {
return v1.x * v2.y - v2.x * v1.y;
}
function intersectWithLine(l1p1, l1p2, l2p1, l2p2) {
p = l1p1;
r = l1p2.subtract(l1p1);
q = l2p1;
s = l2p2.subtract(l2p1);
rCrossS = cross(r, s);
if(rCrossS <= epsilon && rCrossS >= -1 * epsilon){
return false;
}
t = cross(q.subtract(p), s)/rCrossS;
u = cross(q.subtract(p), r)/rCrossS;
if(0 <= u && u <= 1 && 0 <= t && t <= 1){
return true;
} else{
return false;
}
}
}
function Vector(x, y) {
this.x = x;
this.y = y;
this.scalarMult = function(scalar){
return new Vector(this.x * scalar, this.y * scalar);
};
this.dot = function(v2) {
return this.x * v2.x + this.y * v2.y;
};
this.perp = function() {
return new Vector(-1 * this.y, this.x);
};
this.subtract = function(v2) {
return this.add(v2.scalarMult(-1));
};
this.add = function(v2) {
return new Vector(this.x + v2.x, this.y + v2.y);
}
};
function ImageManager(canvasId) {
if (typeof ImageManager.instance === 'object') { return ImageManager.instance; }
ImageManager.instance = this;
NONE = 0, MOVING = 1, SCALING = 2, ROTATING = 3;
this.mouseDown = false;
this.mousePrevX = 0;
this.mousePrevY = 0;this.selectedLayer = null;
this.layerState = NONE;
this.canvasOffsetX = 0;
this.canvasOffsetY = 0;
this.scaleImg = new Image();
this.rotateImg = new Image();
this.scaleImg.src = 'img/resize.png';
this.rotateImg.src = 'img/resize.png';
var canvas = canvasId;
var canvasOffsetX = canvas.offsetLeft;
var canvasOffsetY = canvas.offsetTop;
var context = canvas.getContext('2d');
var layers = new Array();
this.addLayer = function (img,src) {
var layer = new Layer(img,src);
layers.push(layer);
return layer;
}
//this.redraw = function(){this.canvasManager.changeShape(false);}
this.getCanvas = function(){return canvas;}
this.getLayers = function() {return layers;}
this.getLayer = function(i) {return layers[i];}
this.isScalingArea = function (mX, mY, layer) {
var scaleOffsetX = layer.offsetX + layer.width;
var scaleOffsetY = layer.offsetY + layer.height;
var square = new Square(new Vector(scaleOffsetX - this.scaleImg.width, scaleOffsetY - this.scaleImg.height),
new Vector(scaleOffsetX, scaleOffsetY - this.scaleImg.height),new Vector(scaleOffsetX, scaleOffsetY),
new Vector(scaleOffsetX - this.scaleImg.width, scaleOffsetY));
square.rotate(layer.angle);
square.alignBottomRight(layer.getSquare().c);
return square.intersect(new Vector(mX, mY));
}
}
function Layer(img,src) {
this.src = src;
this.img = img;
this.offsetX =0;
this.offsetY = 0;
this.imgNaturalWidth = this.img.width;
this.imgNaturalHeight = this.img.height;
this.imgDimension = this.imgNaturalHeight < this.imgNaturalWidth ? 'imgLandscape' : 'imgPortrait';
this.width = this.imgNaturalWidth;
this.height = this.imgNaturalHeight;
this.canvas = document.createElement('canvas');
this.canvas.width = this.width;
this.canvas.height = this.height;
this.context = this.canvas.getContext('2d');
this.context.save();
this.context.translate(this.width / 2, this.height / 2);
this.opacity = 1;
this.visible = true;
this.angle = 0;
this.title = this.src.name;
this.compositeOperation = "source-over";
this.getTitle = function() {
return this.title;
}
this.getFileData = function () {
return this.src;
}
this.getImage = function () {
return this.img;
}
this.isVisible = function () {
return this.visible;
}
this.toggleVisible = function() {
this.visible = !this.visible;
}
this.setCompositeOperation = function (compositeOperation) {
this.compositeOperation = compositeOperation;
}
this.getCompositeOperation = function () {
return this.compositeOperation;
}
this.redraw = function () {
var startX = this.width / 2 - this.width;
var startY = this.height / 2 - this.height;
this.context.clearRect(startX, startY, this.canvas.width, this.canvas.height);
this.context.drawImage(this.img, startX, startY, this.width, this.height);
}
this.getCanvas = function () {
this.redraw();
return this.canvas;
}
this.intersect = function(x, y) {
var square = new Square(
new Vector(this.offsetX, this.offsetY),
new Vector(this.offsetX + this.width, this.offsetY),
new Vector(this.offsetX + this.width, this.offsetY + this.height),
new Vector(this.offsetX, this.offsetY + this.height));
square.rotate(this.angle);
return square.intersect(new Vector(x, y));
}
this.getSquare = function() {
var square = new Square(
new Vector(this.offsetX, this.offsetY),
new Vector(this.offsetX + this.width, this.offsetY),
new Vector(this.offsetX + this.width, this.offsetY + this.height),
new Vector(this.offsetX, this.offsetY + this.height));
square.rotate(this.angle);
return square;
}
this.scale = function(width, height) {
this.context.restore();
this.width = width;
this.height = height;
this.canvas.width = width;
this.canvas.height = height;
this.context.translate(this.width / 2, this.height / 2);
this.redraw();
}
this.setAngle = function(angle) {
this.angle = angle;
}
this.getAngle = function() {
return this.angle;
}
this.setTitle = function(title) {
this.title = title;
}
this.getTitle = function() {
return this.title;
}
}
/**Math from:
* http://bloggingmath.wordpress.com/2009/05/29/line-segment-intersection/
*/
function Square(a, b, c, d) {
this.a = a;
this.b = b;
this.c = c;
this.d = d;
this.origin = centerSquareOrigin(a,b,c,d);
this.intersect = function(mouse) {
return (!intersectWithLine(this.origin, mouse, this.a, this.b) &&
!intersectWithLine(this.origin, mouse, this.b, this.c) &&
!intersectWithLine(this.origin, mouse, this.c, this.d) &&
!intersectWithLine(this.origin, mouse, this.d, this.a));
}
this.rotate = function(angle) {
var radius = Math.sqrt(Math.pow(this.origin.x - this.a.x, 2) + Math.pow(this.origin.y - this.a.y, 2));
var aAngle = Math.atan2((this.a.y - this.origin.y), (this.a.x - this.origin.x));
var bAngle = Math.atan2((this.b.y - this.origin.y), (this.b.x - this.origin.x));
var cAngle = Math.atan2((this.c.y - this.origin.y), (this.c.x - this.origin.x));
var dAngle = Math.atan2((this.d.y - this.origin.y), (this.d.x - this.origin.x));
this.a.x = this.origin.x + radius * Math.cos(angle + aAngle);
this.a.y = this.origin.y + radius * Math.sin(angle + aAngle);
this.b.x = this.origin.x + radius * Math.cos(angle + bAngle);
this.b.y = this.origin.y + radius * Math.sin(angle + bAngle);
this.c.x = this.origin.x + radius * Math.cos(angle + cAngle);
this.c.y = this.origin.y + radius * Math.sin(angle + cAngle);
this.d.x = this.origin.x + radius * Math.cos(angle + dAngle);
this.d.y = this.origin.y + radius * Math.sin(angle + dAngle);
}
this.alignBottomRight = function(alignPoint) {
var diff = new Vector(alignPoint.x - this.c.x, alignPoint.y - this.c.y);
this.a = this.a.add(diff);
this.b = this.b.add(diff);
this.c = this.c.add(diff);
this.d = this.d.add(diff);
this.origin = centerSquareOrigin(this.a, this.b, this.c, this.d);
}
this.alignTopRight = function(alignPoint) {
var diff = new Vector(alignPoint.x - this.b.x, alignPoint.y - this.b.y);
this.a = this.a.add(diff);
this.b = this.b.add(diff);
this.c = this.c.add(diff);
this.d = this.d.add(diff);
this.origin = centerSquareOrigin(this.a, this.b, this.c, this.d);
}
var epsilon = 10e-6;
function centerSquareOrigin(a, b, c, d) {
p = a;
r = c.subtract(a);
q = b;
s = d.subtract(b);
rCrossS = cross(r, s);
if(rCrossS <= epsilon && rCrossS >= -1 * epsilon){
return;
}
t = cross(q.subtract(p), s)/rCrossS;
u = cross(q.subtract(p), r)/rCrossS;
if (0 <= u && u <= 1 && 0 <= t && t <= 1){
intPoint = p.add(r.scalarMult(t));
return new Vector(intPoint.x, intPoint.y);
}
return null;
}
function cross(v1, v2) {
return v1.x * v2.y - v2.x * v1.y;
}
function intersectWithLine(l1p1, l1p2, l2p1, l2p2) {
p = l1p1;
r = l1p2.subtract(l1p1);
q = l2p1;
s = l2p2.subtract(l2p1);
rCrossS = cross(r, s);
if(rCrossS <= epsilon && rCrossS >= -1 * epsilon){
return false;
}
t = cross(q.subtract(p), s)/rCrossS;
u = cross(q.subtract(p), r)/rCrossS;
if(0 <= u && u <= 1 && 0 <= t && t <= 1){
return true;
} else{
return false;
}
}
}
function Vector(x, y) {
this.x = x;
this.y = y;
this.scalarMult = function(scalar){
return new Vector(this.x * scalar, this.y * scalar);
};
this.dot = function(v2) {
return this.x * v2.x + this.y * v2.y;
};
this.perp = function() {
return new Vector(-1 * this.y, this.x);
};
this.subtract = function(v2) {
return this.add(v2.scalarMult(-1));
};
this.add = function(v2) {
return new Vector(this.x + v2.x, this.y + v2.y);
}
};
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment