0

我正在为我的编程课做一个项目。我想基本上有一个带有背景元素的画布（比如 room.jpg），然后房间里可能有三个交互式对象（lamp.jpg、couch.jpg、desk.jpg）。我希望它是，如果您将鼠标悬停在灯上，则会弹出一个小框或文本，为您提供一些信息。或者也许有它，所以如果你点击一个图像，同样的概念就会发生。你知道，与画布中的对象交互的东西。同样，我是画布的新手，但我们必须在作业中使用它。我目前的代码是：

function loadImages(sources, callback) {
            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];
                }
            }

            var sources = {
            room: 'room.jpg',
            title: 'title.jpg'
            };

            loadImages(sources, function(images) {
            context.drawImage(images.room, 0,0);
            context.drawImage(images.title, 0,0);
            });
            }

但据我了解，它使这两个 jpeg 成为“永久”画布元素（无法被弄乱）。我一直试图得到它，以便当我点击时我会从 title.jpg 转到 room.jpg 但我已经放弃了。本质上，我现在想要的只是让 room.jpg 在页面首次加载时出现，并在顶部有其他三个 png 对象（作为房间中的对象）。这些是否可以交互，或者我必须以其他方式将图像放入画布中？感谢您的所有帮助和耐心！

4

1 回答 1

0 
// --- Image Loader ----
var images = {};
var loadedImages = 0;
var pictures = {
    room: 'room.jpg',
    title: 'title.jpg'
    lamp1: 'lampoff.jpg'
    lamp2: 'lampon.jpg'
};
function loadImages(sources, callback) {
    var numImages = 0;
    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];
    }
}



// --- Mouse Down Functionality ----
$('#canvas').addEventListener('mouseDown', function(e){
    if(e.clientX){
        var rect = this.getBoundingClientRect();
        if(rect)            clickCanvas(e.clientX - rect.left, e.clientY - rect.top)
        else                clickCanvas(e.clientX  - this.offsetLeft, e.clientY - this.offsetTop);
    }else if(e.offsetX)     clickCanvas(e.offsetX, e.offsetY);
    else if(e.layerX)       clickCanvas(e.layerX, e.layerY);
    else console.warn("Couldn't Determine Mouse Coordinates");
})


var lampOn;

function drawCanvas(showLamp){
    lampOn = showLamp;
    canvas.width = canvas.width //clears canvas
    context.drawImage(images.room, 0,0);
    context.drawImage(images.title, 0,0);
    if(lampOn){ 
        context.drawImage(images.lamp2, 100,100);
    }else{
        context.drawImage(images.lamp1, 100,100);
    }
}   

function clickCanvas(x,y){
    console.log('clicked canvas at:',x,y)
    if(clickedLamp){
        drawCanvas(!lampOn)
    }
}

loadImages(pictures, function(images) {
    drawCanvas(false)
});

确保替换“clickedLamp”和“#canvas”！这里的想法是您使用相同的功能重新绘制相同的画布。每次修改其中任何内容时，都会重新渲染所有内容。看看你是否能让这个例子工作，这将有助于澄清很多。如果你有什么不明白的评论

于 2014-12-16T13:56:05.740 回答