131 lines
3 KiB
JavaScript
131 lines
3 KiB
JavaScript
|
|
var rotation;
|
|
var rotationStep;
|
|
var canvas;
|
|
var ctx;
|
|
var locationx;
|
|
var locationy;
|
|
var autoscale = false;
|
|
var radius = 1; // the radius of the circle whe put the photo inside
|
|
var zoomfactor = 1;
|
|
var baseCoordZoom;
|
|
var trX = 0;
|
|
var trY = 0;
|
|
|
|
function initialize() {
|
|
rotation = 0.0;
|
|
rotationStep = 2 * Math.PI / 360;
|
|
canvas = document.getElementById("photoarea");
|
|
locationx = document.getElementById("locationx");
|
|
locationy = document.getElementById("locationy");
|
|
if (canvas.getContext) {
|
|
ctx = canvas.getContext("2d");
|
|
}
|
|
canvas.onmousemove = mouseMove;
|
|
canvas.onmousewheel = mouseWheel;
|
|
|
|
var dside = Math.min(canvas.width, canvas.height) / 2;
|
|
baseCoordZoom = dside / radius;
|
|
}
|
|
|
|
|
|
function draw() {
|
|
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
ctx.save();
|
|
|
|
var photo = document.getElementById("photo");
|
|
|
|
// Calculate a scale factor to make the image diagonal from center to corner be exactly 1.0
|
|
var imgw = photo.width / 2;
|
|
var imgh = photo.height / 2;
|
|
var imgs = radius / Math.sqrt(imgw * imgw + imgh * imgh);
|
|
|
|
baseAngle = Math.atan(imgh/imgw);
|
|
|
|
if (autoscale) {
|
|
var angle1 = baseAngle + rotation;
|
|
var angle2 = baseAngle - rotation;
|
|
var maxY = Math.max(Math.abs(Math.sin(angle1)), Math.abs(Math.sin(angle2)));
|
|
var maxX = Math.max(Math.abs(Math.cos(angle1)), Math.abs(Math.cos(angle2)));
|
|
zoomfactor = Math.min((canvas.width/2)/maxX, (canvas.height/2)/maxY);
|
|
}
|
|
|
|
ctx.translate(canvas.width / 2, canvas.height / 2);
|
|
ctx.scale(baseCoordZoom, -baseCoordZoom);
|
|
ctx.translate(trX, trY);
|
|
ctx.scale(zoomfactor, zoomfactor);
|
|
|
|
ctx.save();
|
|
ctx.rotate(rotation);
|
|
ctx.scale(imgs, -imgs);
|
|
ctx.drawImage(photo, -imgw, -imgh);
|
|
ctx.restore();
|
|
|
|
if (true) {
|
|
ctx.lineWidth = 0.01;
|
|
ctx.beginPath();
|
|
ctx.moveTo(0, 0);
|
|
ctx.lineTo(0, 1);
|
|
ctx.moveTo(1, 0);
|
|
ctx.arc(0, 0, 1, 0, 2 * Math.PI, false);
|
|
ctx.stroke();
|
|
}
|
|
ctx.restore();
|
|
}
|
|
|
|
// invoked by Canvas.onMouseMove.
|
|
function mouseMove(event) {
|
|
|
|
locationx.innerHTML = screenToCoordX(event.clientX - canvas.offsetLeft).toFixed(3);
|
|
locationy.innerHTML = screenToCoordY(event.clientY - canvas.offsetTop).toFixed(3);
|
|
|
|
// ctx.strokeRect(event.clientX, event.clientY, 20, 20);
|
|
}
|
|
|
|
|
|
function screenToCoordX(screenX) {
|
|
return (screenX - canvas.width/2) / (baseCoordZoom * zoomfactor);
|
|
}
|
|
function screenToCoordY(screenY) {
|
|
return (canvas.height/2 - screenY) / (baseCoordZoom * zoomfactor);
|
|
}
|
|
|
|
|
|
|
|
function mouseWheel(event) {
|
|
// alert('delta: ' + event.wheelDelta);
|
|
zoomfactor *= (1 - event.wheelDelta/1000.0);
|
|
draw();
|
|
mouseMove(event);
|
|
}
|
|
|
|
|
|
document.onkeydown = function(event) {
|
|
var keyCode;
|
|
var doDraw = false;
|
|
|
|
if (event == null) {
|
|
keyCode = window.event.keyCode;
|
|
} else {
|
|
keyCode = event.keyCode;
|
|
}
|
|
switch (keyCode) {
|
|
// left
|
|
case 37:
|
|
rotation += rotationStep;
|
|
doDraw = true;
|
|
break;
|
|
// right
|
|
case 39:
|
|
rotation -= rotationStep;
|
|
doDraw = true;
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
if (doDraw) {
|
|
draw();
|
|
}
|
|
}
|
|
|