我正在开发一个使用书架的metaphore的Web应用程序。
水平图像：
http://tinypic.com/view.php?pic=2cmkiz8&s=8#.U8b0G3UphUY
垂直图像：
http://tinypic.com/view.php?pic=15g2m1e&s=8#.U8b0mnUphUY
我通过在屏幕上设置画布，然后在书架上设置书籍来实现这一点，redimension算法可以根据书架的宽度和高度调整书籍并重新定位。
这是书架的.jsp页面：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Autobiographical Aid</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
<link
href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300,300italic'
rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<canvas id="myCanvas"></canvas>
<script type="text/javascript" src="js/canvas.js"></script>
</body>
</html>
很简单，它只有一个画布，然后在canvas.js中设置所有内容。
(function() {
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var sources = {
album : 'images/photo_album.jpg'
};
var clickedLink = false;
//the image xpto is in the position
// (x,y) (x+width,y)
// (x,y+height) (x+width,y+height)
var imageLocations = {
album : [ 0, 0, 0, 0, "photoalbum.jsp" ]
};
var linkToFollow = "";
// resize the canvas to fill browser window dynamically
window.addEventListener('resize', resizeCanvas, false);
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var background = new Image();
background.src = "images/bookshelf.png";
background.onload = function() {
context.drawImage(background, 0, 0, canvas.width, canvas.height);
};
/**
* Your drawings need to be inside this function otherwise they will be reset when
* you resize the browser window and the canvas goes will be cleared.
*/
drawStuff(
sources,
function(images) {
var imgCrop = 0;// proporção de reduçao da imagem
var paddingSide = canvas.width * 0.04;
var imgX = canvas.width * 0.04; //posiçao de x
var imgY = canvas.height * 0.07; // posiçao de y
var rackHeight = canvas.height * 0.34;
var maxBookDim = rackHeight;
var paddingBetweenBooks = canvas.width * 0.02;
var numImages = 0;
var rackWidth = 2 * 0.04; //padding plus 1 image
var first = true;
var done = false;
var imginLine = 0;
var rackSpacing = canvas.height * 0.05;
for ( var img in images) {
numImages++;
if (first) {
first = false;
rackWidth = rackWidth + maxBookDim;
} else {
rackWidth = rackWidth + paddingBetweenBooks
+ maxBookDim;
if (!done && rackWidth > canvas.width) {
imginLine = numImages - 1;
done = true;
}
}
}
if(!done){
imginLine = numImages;
}
var rowCapacity = imginLine;
var imgX1 = 0;
var sizeForImage = (canvas.width - paddingSide * 2 - paddingBetweenBooks
* (imginLine - 1))
/ imginLine;
for ( var img in images) {
//horizontal
if (images[img].width > images[img].height) {
imgCrop = images[img].width / rackHeight;
imgX1 = (sizeForImage - images[img].width / imgCrop) / 2;
} else {//vertical
imgCrop = images[img].height / rackHeight;
imgX1 = (sizeForImage - images[img].width / imgCrop) / 2;
}
var x = imgX + imgX1;
var y = imgY + rackHeight - images[img].height
/ imgCrop;
var width = images[img].width / imgCrop;
var height = images[img].height / imgCrop;
context.drawImage(images[img], x, y, width, height);
imageLocations[img][0] = x;
imageLocations[img][1] = y;
imageLocations[img][2] = width;
imageLocations[img][3] = height;
if(canvas.width < canvas.height){
context.font = '50px Arial';
}else{
context.font = '30px Arial';
}
context.font = '30px Arial';
context.fillStyle = 'white';
context.fillText('Photo Album', x+25, y+(height/2)+10);
imgX = imgX + sizeForImage + paddingBetweenBooks;
rowCapacity -= 1;
if (rowCapacity == 0) {
imgY = imgY + rackSpacing + maxBookDim;
rowCapacity = imginLine;
imgX = paddingSide;
}
}
//add mouse listeners
canvas.addEventListener("mousemove", on_mousemove, false);
canvas.addEventListener("click", on_click, false);
});
}
resizeCanvas();
function drawStuff(sources, callback) {
// do your drawing stuff here
var images = {};
var loadedImages = 0;
var numImages = 0;
// get num of sources
for ( var src in sources) {
numImages++;
}
for ( var src in sources) {
images[src] = new Image();
images[src].onload = function() {
if (++loadedImages >= numImages) {
callback(images);
}
};
images[src].src = sources[src];
}
}
function on_mousemove(ev) {
var x, y;
// Get the mouse position relative to the canvas element.
if (ev.layerX || ev.layerX == 0) { //for firefox
x = ev.layerX;
y = ev.layerY;
}
x -= canvas.offsetLeft;
y -= canvas.offsetTop;
for ( var img in imageLocations) {
//is the mouse over the image?
if (x >= imageLocations[img][0]
&& x <= (imageLocations[img][0] + imageLocations[img][2])
&& y >= imageLocations[img][1]
&& y <= (imageLocations[img][1] + imageLocations[img][3])) {
document.body.style.cursor = "pointer";
clickedLink = true;
linkToFollow = imageLocations[img][4];
break;
} else {
document.body.style.cursor = "";
clickedLink = false;
linkToFollow = "";
}
}
}
//if the link has been clicked, go to link
function on_click(e) {
if (clickedLink) {
window.location = "photoalbum.jsp";
//document.getElementById('book').style.display = 'none';
//document.getElementById('fade').style.display = 'none';
}
}
})();
我检查屏幕尺寸，重新定位书籍，并根据新尺寸调整图像大小。
虽然我得到了理想的行为，但是当我第一次加载页面时，您可以在图片中看到的图书没有出现，强迫我多次重新加载页面，直到它或调整浏览器窗口的大小。
代码有效，但为什么我第一次加载时会出现这个错误？
问题似乎出现在我正在添加代码的监听器中：
canvas.addEventListener("mousemove", on_mousemove, false);
canvas.addEventListener("click", on_click, false);
它们被添加，因此我知道用户何时点击书籍并将其用作到另一个位置的hiperlink。
如果我没有把它们放在首次加载完美但是用户不能继续写书。
答案 0 :(得分：0)
脚本在页面加载时检查屏幕大小，因此当您调整窗口大小时，页面不会加载，脚本会认为屏幕大小没有改变。
为什么不尝试使用媒体查询完成任务？