使用图像作为HTML画布按钮 [英] using images as buttons on html canvas
问题描述
所以，我已经成功地获取JavaScript code跟踪光标移到HTML画布由于坊间上显示的图像，但现在我试图把图像作为一个按钮，每一个和显示不同图像当光标悬停。到目前为止，直通许多置换我没有能够将图像或图像路径存储到还包含我们使用以包含路径的点的数组元素。这里是code：
So I've managed to get javascript code to track the cursor over images displayed on an html canvas thanks to markE, but now I'm trying to treat each one of the images as a button and display a different image when the cursor is hovering. So far, thru many permutations, I have not been able to store an image, or image pathname into an array element that also contains the points we are using to contain the path. Here is the code:
<script type="text/javascript" language="JavaScript">
var canvas;
var canvasWidth;
var ctx;
function init() {
HideContent('readLess');
var cursors=['default','w-resize','n-resize'];
var currentCursor=0;
canvas = document.getElementById('puzzle-container');
canvas.width = 815;
canvas.height = 425;
canvas.align = 'center';
ctx = canvas.getContext("2d");
var search = new Image();
search.src = 'img/puzzleSearch.png';
var searchHover = new Image();
search.onload = function() {
ctx.drawImage(search, 0, 0);
};
var nav = new Image();
nav.src = 'img/puzzleNav.png';
var navHover = new Image();
nav.onload = function() {
ctx.drawImage(nav, 119, 2.5 );
}
.
.
.
var events = new Image();
events.src = 'img/puzzleEvents.png';
var eventsHover = new Image();
eventsHover.src = 'img/puzzleEventsHover.png';
events.onload = function() {
ctx.drawImage(events, 564, 265 );
}
function reOffset(){
var BB=canvas.getBoundingClientRect();
offsetX=BB.left;
offsetY=BB.top;
}
var offsetX,offsetY;
reOffset();
window.onscroll=function(e){ reOffset(); }
window.onresize=function(e){ reOffset(); }
$("#puzzle-container").mousemove(function(e){handleMouseMove(e);});
var shapes=[];
shapes.push({
points:[{x:0,y:2.5},{x:155,y:2.5},{x:155,y:205},{x:0,y:205}], cursor:1, img:search, imgHov:searchHover,
});
.
.
.
shapes.push({
points:[{x:0,y:310},{x:250,y:310},{x:250,y:400},{x:0,y:400}], cursor:1, img:events, imgHov:'img/eventsHover.png',
});
for(var i=0;i<shapes.length;i++){
var s=shapes[i];
definePath(s.points);
ctx.stroke();
}
function definePath(p){
ctx.beginPath();
ctx.moveTo(p[0].x,p[0].y);
for(var i=1;i<p.length;i++){
ctx.lineTo(p[i].x,p[i].y);
}
ctx.closePath();
}
function handleMouseMove(e){
// tell the browser we're handling this event
e.preventDefault();
e.stopPropagation();
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// Put your mousemove stuff here
var newCursor;
for(var i=0;i<shapes.length;i++){
var s=shapes[i];
definePath(s.points);
if(ctx.isPointInPath(mouseX,mouseY)){
if (i === 6 ) {
var img = new Image();
var imgSrc = s.imgHov;
img.src = imgSrc;
console.log("hover image is: " + s.imgHov );
ctx.drawImage(img, 564, 265 );
}
newCursor=s.cursor;
break;
}
}
if(!newCursor){
if(currentCursor>0){
currentCursor=0;
canvas.style.cursor=cursors[currentCursor];
}
}else if(!newCursor==currentCursor){
currentCursor=newCursor;
canvas.style.cursor=cursors[currentCursor];
}
}
}
function HideContent(d) {
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
document.getElementById(d).style.display = "block";
}
function ReverseDisplay(d) {
if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
else { document.getElementById(d).style.display = "none"; }
}
</script>
我试着存储阵列，阵列中的图像路径名的图像变量，但最后总是得到404错误时它会尝试当我悬停在它与光标加载图像。如果我硬code图像名和负载，它将被当光标悬停在该路径显示。
I've tried storing the image variables in the array, the image pathnames in the array, but always end up getting 404 errors when it tries to load the image when I hover over it with the cursor. If I hard code an image name and load, it will be displayed when the cursor hovers over that path.
我在做什么错误的图像名称和/或路径存储点的阵列中，所以我可以当我跟踪光标的移动访问它？
What am I doing wrong to store the image names and/or paths in the array of points so I can access it when I am tracking cursor movement?
感谢.....
推荐答案
您的解决办法是preLOAD使用它们之前所有的图像。
Your fix is to preload all your images before using them.
图像不会立即加载。当您设置 img.src 浏览器的开始加载图像也继续到code的下一行甚至在图像满载。
Images do not load immediately. When you set the img.src the browser begins loading the image but also continues onto the next line of code even before the image is fully loaded.
问题是在这里：
// the browser BEGINS to load the image, but simultaneously
// continues executing the code that follows.
img.src = imgSrc;
// img has not yet loaded when drawImage is executed
ctx.drawImage(img, 564, 265 );
有几十种图像pre-装载机的使用。这里只有一个：
There are dozens of image pre-loaders available. Here's just one:
// canvas related variables
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
// put the paths to your images in imageURLs[]
var imageURLs=[];
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/face1.png");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/face2.png");
// the loaded images will be placed in imgs[]
var imgs=[];
var imagesOK=0;
startLoadingAllImages(imagesAreNowLoaded);
// Create a new Image() for each item in imageURLs[]
// When all images are loaded, run the callback (==imagesAreNowLoaded)
function startLoadingAllImages(callback){
// iterate through the imageURLs array and create new images for each
for (var i=0; i<imageURLs.length; i++) {
// create a new image an push it into the imgs[] array
var img = new Image();
// Important! By pushing (saving) this img into imgs[],
// we make sure the img variable is free to
// take on the next value in the loop.
imgs.push(img);
// when this image loads, call this img.onload
img.onload = function(){
// this img loaded, increment the image counter
imagesOK++;
// if we've loaded all images, call the callback
if (imagesOK>=imageURLs.length ) {
callback();
}
};
// notify if there's an error
img.onerror=function(){alert("image load failed");}
// set img properties
img.src = imageURLs[i];
}
}
// All the images are now loaded
// Do drawImage & fillText
function imagesAreNowLoaded(){
// the imgs[] array now holds fully loaded images
// the imgs[] are in the same order as imageURLs[]
}
这篇关于使用图像作为HTML画布按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
