Canvas version of editor.
Cosmetic changes.
This commit is contained in:
knut
parent
8f2d33c01c
commit
b64197e669
11 changed files with 168 additions and 9 deletions
BIN
photos/IMG_0129.JPG
Normal file
BIN
photos/IMG_0129.JPG
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 301 KiB |
BIN
photos/IMG_0139.JPG
Normal file
BIN
photos/IMG_0139.JPG
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 329 KiB |
|
|
@ -1,7 +1,5 @@
|
||||||
package album.config;
|
package album.config;
|
||||||
|
|
||||||
import java.util.*;
|
|
||||||
import java.io.*;
|
|
||||||
|
|
||||||
public class Item
|
public class Item
|
||||||
extends Entry
|
extends Entry
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,5 @@
|
||||||
package album.config;
|
package album.config;
|
||||||
|
|
||||||
import java.util.*;
|
|
||||||
import java.io.*;
|
|
||||||
import javax.imageio.*;
|
|
||||||
import java.awt.image.*;
|
|
||||||
import java.awt.geom.*;
|
|
||||||
|
|
||||||
public class Photo
|
public class Photo
|
||||||
extends Item
|
extends Item
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
package album.config;
|
package album.config;
|
||||||
|
|
||||||
import java.awt.*;
|
import java.awt.Dimension;
|
||||||
import java.awt.geom.*;
|
import java.awt.Rectangle;
|
||||||
|
|
||||||
public class Transform {
|
public class Transform {
|
||||||
Dimension size;
|
Dimension size;
|
||||||
|
|
|
||||||
|
|
@ -97,6 +97,7 @@ public class Editor
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@Override
|
||||||
protected void paintComponent(Graphics g1) {
|
protected void paintComponent(Graphics g1) {
|
||||||
super.paintComponent(g1);
|
super.paintComponent(g1);
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -11,12 +11,14 @@ public class AlbumServlet
|
||||||
{
|
{
|
||||||
File baseDir = new File("/home/knut");
|
File baseDir = new File("/home/knut");
|
||||||
|
|
||||||
|
@Override
|
||||||
public void init()
|
public void init()
|
||||||
throws ServletException
|
throws ServletException
|
||||||
{
|
{
|
||||||
System.out.println("in init of Album");
|
System.out.println("in init of Album");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@Override
|
||||||
public void doGet(HttpServletRequest req, HttpServletResponse res)
|
public void doGet(HttpServletRequest req, HttpServletResponse res)
|
||||||
throws ServletException, IOException
|
throws ServletException, IOException
|
||||||
{
|
{
|
||||||
|
|
@ -113,6 +115,7 @@ public class AlbumServlet
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@Override
|
||||||
public String getServletInfo() {
|
public String getServletInfo() {
|
||||||
return "Display a directory as an album";
|
return "Display a directory as an album";
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -23,6 +23,7 @@ public class BitmapServlet
|
||||||
protected int size;
|
protected int size;
|
||||||
|
|
||||||
|
|
||||||
|
@Override
|
||||||
public void init()
|
public void init()
|
||||||
throws ServletException
|
throws ServletException
|
||||||
{
|
{
|
||||||
|
|
@ -35,6 +36,7 @@ public class BitmapServlet
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@Override
|
||||||
public void doGet(HttpServletRequest req, HttpServletResponse res)
|
public void doGet(HttpServletRequest req, HttpServletResponse res)
|
||||||
throws ServletException, IOException
|
throws ServletException, IOException
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -23,6 +23,7 @@ public class PhotoServlet
|
||||||
protected int size;
|
protected int size;
|
||||||
|
|
||||||
|
|
||||||
|
@Override
|
||||||
public void init()
|
public void init()
|
||||||
throws ServletException
|
throws ServletException
|
||||||
{
|
{
|
||||||
|
|
@ -35,6 +36,7 @@ public class PhotoServlet
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@Override
|
||||||
public void doGet(HttpServletRequest req, HttpServletResponse res)
|
public void doGet(HttpServletRequest req, HttpServletResponse res)
|
||||||
throws ServletException, IOException
|
throws ServletException, IOException
|
||||||
{
|
{
|
||||||
|
|
|
||||||
27
webapp/editor.html
Normal file
27
webapp/editor.html
Normal 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
131
webapp/editor.js
Normal 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();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
Loading…
Add table
Reference in a new issue