在html5画布上创建多个链接

Question

I am trying to create a map with several locations using html5 canvas. 我正在尝试使用html5 canvas创建具有多个位置的地图。 I want each location to be a link to another web page. 我希望每个位置都可以链接到另一个网页。 Currently I am able to get only one link working. 目前，我只能使一个链接正常工作。 I am trying to loop through the locations, there are ~15 locations with individual links. 我试图遍历这些位置，有〜15个位置带有单独的链接。 This is the code that I have been trying to use but it will loop through but only the last in the loop with have a link. 这是我一直在尝试使用的代码，但它将循环遍历，但只有循环中的最后一个具有链接。

I have only started to use html5 canvas and javascript recently. 我最近才开始使用html5 canvas和javascript。 This code was taken from a solution online and adapted to what I want. 这段代码是从在线解决方案中获取的，适合我的需求。

        link = ["websitelink1", "websitelink2", ... etc];
        links = [[x_coord1,y_coord1,width1,height1],[x_coord2,y_coord2,width2,height2], ... etc]
        canvas.addEventListener("mousemove", on_mousemove, false);
        canvas.addEventListener("click", on_click, false);
        inlink = "";

        function on_mousemove (ev) {
            var mouse_x, mouse_y;

            // Get the mouse position relative to the canvas element.
            if (ev.layerX || ev.layerX) { //for firefox
                mouse_x = ev.layerX;
                mouse_y = ev.layerY;
            }
            mouse_x-=canvas.offsetLeft;
            mouse_y-=canvas.offsetTop;

            for(n = links.length - 1; n >= 0; n--) {
                var linkX = parseInt(links[n][0]),
                    linkY = parseInt(links[n][1]),
                    linkwidth = parseInt(links[n][2]),
                    linkheight = parseInt(links[n][3]);
                    linkHref = link[n];

                //is the mouse over the link?
                if(mouse_x >= linkX && mouse_x <= (linkX + linkwidth) && mouse_y >= linkY && mouse_y <= (linkY + linkheight)) {
                    document.body.style.cursor = "pointer";
                    inLink=linkHref;
                }
                else{
                    document.body.style.cursor = "";
                    inLink="";
                }
            }
        }
        function on_click(e) {
            if (inLink != "") {
                window.open(inlink);
            }
        }

I have tried similar code with the similar results. 我尝试过类似的代码，但结果相似。

Thank you for your help. 谢谢您的帮助。

Answer 1

I can see a couple of problems here. 我可以在这里看到几个问题。

(1) you reset inLink to "" inside the loop. （1）你复位内链接到“”的循环中。 This means that if you hover over a link, remaining links in the loop will not be hovered over, and will reset inLink to "" - fix = set inLink to "" once , before the loop (you can't hover over more than one link at a time, so it can only be set once inside the loop) 这意味着，如果将鼠标悬停在链接上，则不会将循环中的其余链接悬停，并且会将inLink重置为“”-fix =将inLink设置为“” 一次，然后再循环（您不能将鼠标悬停在一次只有一个链接，因此只能在循环内设置一次）

(2) You've inconsistently 'spelt' inLink . （2）您不一致地“拼写”了inLink 。 - fix = ensure capitalization is the same for all instances of the variable (inLink is different to inlink) -修复=确保变量的所有实例的大小写都相同（inLink与inlink不同）

(3) The placement of brackets in the check if you're over a link has the potential to be ambiguous. （3）如果您在链接上方，则在检查中放置方括号可能会造成歧义。

(4) By using links.length in the for loop, it needs to be recalculated each time through the loop. （4）通过在for循环中使用links.length，需要在每次循环中重新计算它。 A better approach is to read this value once and store it in a temporary variable. 更好的方法是一次读取该值并将其存储在一个临时变量中。

Here's a rough example of the code working just fine, as tested in Chrome (no FF here, unfortunately) 这是一个粗略的示例，表明代码在Chrome上进行了测试，效果很好（不幸的是，这里没有FF）

Note: I've also added the break to discontinue the loop if a hovered link is found - there's no need to check the remaining ones in the loop if you find one successfully. 注意：如果找到了悬停的链接，我还添加了break来中断循环-如果找到一个成功的链接，则无需检查循环中的其余链接。 (This speeds up execution, while also achieving the same effect as point #1) （这加快了执行速度，同时也实现了与第1点相同的效果）

Note2: It is faster to iterate through the loop from n-1 to 0, as you had initially done - I just prefer to go forwards. 注2：这是更快，从N-1通过循环迭代为0，因为你最初做-我只是喜欢向前去。

<!DOCTYPE html>
<html>
<head>
<script>
function byId(e){return document.getElementById(e);}

window.addEventListener('load', onDocLoaded, false);

function onDocLoaded()
{
    outlineLinks();
    byId('can').addEventListener("mousemove", on_mousemove, false);
    // byId('can').addEventListener("click", on_click2, false);
    byId('can').addEventListener("click", on_click, false);
}

// var link = ["websitelink1", "websitelink2"];
var link = ["http://stackoverflow.com/questions/24650947/creating-multiple-links-on-html5-canvas/24652217", "http://stackoverflow.com/"];
var links = [[0,0,100,20],[0,25,100,20]];

var inLink = "";

function outlineLinks()
{
    var canvas = byId('can');
    var ctx = canvas.getContext('2d');

    var i, n = links.length;
    for (i=0; i<n; i++)
        ctx.strokeRect( links[i][0], links[i][1], links[i][2], links[i][3] );
}

function on_mousemove(evt) 
{
    var mouse_x, mouse_y;

    // Get the mouse position relative to the canvas element.
    if (evt.layerX || evt.layerX) 
    { //for firefox
        mouse_x = evt.layerX;
        mouse_y = evt.layerY;
    }
    mouse_x -= this.offsetLeft;
    mouse_y -= this.offsetTop;

    byId('coords').innerHTML = "Mouse Pos: " + mouse_x + "," + mouse_y;

    var n = links.length;
    inLink = "";
    for(i=0; i<n; i++) 
    {
        var linkX = parseInt(links[i][0]),
            linkY = parseInt(links[i][1]),
            linkwidth = parseInt(links[i][2]),
            linkheight = parseInt(links[i][3]);

        //is the mouse over the link?
        if( (mouse_x >= linkX) && (mouse_x <= (linkX + linkwidth)) && (mouse_y >= linkY) && (mouse_y <= (linkY + linkheight)))
        {
            document.body.style.cursor = "pointer";
            inLink = link[i];
            break;
        }
        else{
            document.body.style.cursor = "";
        }
    }
}
function on_click(evt)
{
    if (inLink != "")
        window.open(inLink);
}

function on_click2(evt)
{
    if (inLink != "")
        byId('tgt').innerHTML = "Navigating to: " + inLink;
    else
        byId('tgt').innerHTML = "No link is hovered";
}

</script>
<style>
</style>
</head>
<body>
    <div id='tgt'>&nbsp;</div>
    <div id='coords'>&nbsp;</div>
    <canvas id='can'></canvas>
</body>
</html>

在html5画布上创建多个链接

问题描述

1 个解决方案

解决方案1
0 已采纳 2014-07-09 11:14:32

在html5画布上创建多个链接

问题描述

1 个解决方案

解决方案1 0 已采纳 2014-07-09 11:14:32

解决方案1
0 已采纳 2014-07-09 11:14:32