Question

我花了好几个小时试图找到答案，但找不到任何准确描述我想要做的事情。我有6个形状像拼图块的图像，我把它们放在画布上的适当位置。我真正想要的是每个拼图也像按钮一样，所以当用户点击一个片段时，我可以捕获该事件然后导航到新页面。

我发现的所有内容都谈到了使用html按钮然后使用css将它们放在画布上 - 但是这些图像都是形状奇特的拼图，我不能这样做。

当它们位于特定图像之上时，是否甚至可以捕获鼠标事件？

...谢谢

好的，我已经设法在每个拼图上跟踪光标。现在，当光标悬停在一块（打开新页面的前奏）时，我正试图显示不同版本的图像。我试图将原始图像和悬停图像存储在点数组中，但我尝试的任何东西似乎都无法工作。我需要能够在光标位于片上时显示悬停图像，然后在光标移开时恢复它（还没有那么远）。现在，当我尝试将图像拉出点阵列时，我得到了404错误 - 试图存储实际的图像变量和图像路径名，但无济于事。

以下是代码：

<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 );
                    }
                    //console("the mouse is in shape "+ i );
                    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（未找到）（[对象HTMLImageElement]，第0行） [Log]悬停图片是：[object HTMLImageElement]（index.html，168行）

关于如何在点数组中保存图像，我是否遗漏了一些微不足道的事情？

感谢.....

画布图像为按钮

0 个答案: