knut/album
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Canvas version of editor.

Browse source 
Cosmetic changes.
This commit is contained in:
knut 2008-03-02 20:10:03 +00:00
parent 8f2d33c01c
commit b64197e669
11 changed files with 168 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
photos/IMG_0129.JPG Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 301 KiB

BIN
photos/IMG_0139.JPG Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 329 KiB

2
src/album/config/Item.java
View file

@ -1,7 +1,5 @@
package album.config;
import java.util.*;
import java.io.*;
public class Item
extends Entry

5
src/album/config/Photo.java
View file

@ -1,10 +1,5 @@
package album.config;
import java.util.*;
import java.io.*;
import javax.imageio.*;
import java.awt.image.*;
import java.awt.geom.*;
public class Photo
extends Item

4
src/album/config/Transform.java
View file

@ -1,7 +1,7 @@
package album.config;
import java.awt.*;
import java.awt.geom.*;
import java.awt.Dimension;
import java.awt.Rectangle;
public class Transform {
Dimension size;

1
src/album/editor/Editor.java
View file

@ -97,6 +97,7 @@ public class Editor
}
@Override
protected void paintComponent(Graphics g1) {
super.paintComponent(g1);

3
src/album/web/AlbumServlet.java
View file

@ -11,12 +11,14 @@ public class AlbumServlet
{
File baseDir = new File("/home/knut");
@Override
public void init()
throws ServletException
{
System.out.println("in init of Album");
}
@Override
public void doGet(HttpServletRequest req, HttpServletResponse res)
throws ServletException, IOException
{
@ -113,6 +115,7 @@ public class AlbumServlet
}
@Override
public String getServletInfo() {
return "Display a directory as an album";
}

2
src/album/web/BitmapServlet.java
View file

@ -23,6 +23,7 @@ public class BitmapServlet
protected int size;
@Override
public void init()
throws ServletException
{
@ -35,6 +36,7 @@ public class BitmapServlet
}
@Override
public void doGet(HttpServletRequest req, HttpServletResponse res)
throws ServletException, IOException
{

2
src/album/web/PhotoServlet.java
View file

@ -23,6 +23,7 @@ public class PhotoServlet
protected int size;
@Override
public void init()
throws ServletException
{
@ -35,6 +36,7 @@ public class PhotoServlet
}
@Override
public void doGet(HttpServletRequest req, HttpServletResponse res)
throws ServletException, IOException
{

27
webapp/editor.html Normal file
View file

@ -0,0 +1,27 @@
<html>
<head>
<title>Editor</title>
<script type="application/x-javascript" src="editor.js">
</script>
<style type="text/css">
img { display:none; }
</style>
</head>
<body style="margin-left: 0 px; margin-top: 0 px;" onload="draw();">
<img src="../photos/forkalsrud-ca-1951.jpg" id="photo">
<canvas id="photoarea" width="800" height="600"></canvas><br/>
<div>
<label id="locationx"></label>, <label id="locationy"></label>
</div>
<address>
<a href="mailto:knut@forkalsrud.org">Knut</a>
</address>
<script type='application/x-javascript'>
initialize();
draw();
</script>
</body>
</html>

131
webapp/editor.js Normal file
View file

@ -0,0 +1,131 @@
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();
}
}