将 Href 添加到画布元素

Question

我正在使用HexagonTools 使用画布绘制六边形。

我需要添加一个指向画布元素的 href 链接。

我试过这段代码：

function drawHexGrid()
{
var linkText="http://stackoverflow.com";
var linkX=5;
var linkY=15;
var linkHeight=10;
var linkWidth;
var inLink = false;

    var grid = new HT.Grid(800, 600);
    var canvas = document.getElementById("hexCanvas");
    var ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, 800, 600);
    for(var h in grid.Hexes)
    {
        grid.Hexes[h].draw(ctx);
        linkWidth=ctx.measureText(linkText).width;          
             canvas.addEventListener("mousemove", on_mousemove, false);
canvas.addEventListener("click", on_click, false);

    }
}

但这不起作用，我需要一个简单的例子来说明如何开发它，我已经看过这个SOF Question 但我无法开发它

Answer 1

您可以使用context.isPointInPath 测试鼠标单击的六边形。

• 监听 mousedown 事件
• 在 mousedown 中，获取 mouseX、mouseY
• 重新创建每个十六进制路径（无需实际描边/填充它们）。
• 对于每个十六进制，使用.isPointInPath(mouseX,mouseY) 查看鼠标是否在该十六进制中单击。
• 如果您发现点击的十六进制，请使用window.open(theUrl, '_blank') 导航到其关联的网址。

在 Hexagon 工具中，每个 hex 都有一个 points 属性，您可以使用它来重新获取每个 hex 路径。

这是示例代码和演示：

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
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(); }

var isDown=false;
var startX,startY;

var hexes=[];
hexes.push({
  points:[{x:57.5,y:63},{x:42.5,y:63},{x:35,y:50},{x:42.5,y:37},{x:57.5,y:37},{x:65,y:50}],
  url:'http://stackoverflow.com',
});

draw();

$("#canvas").mousedown(function(e){handleMouseDown(e);});

function draw(){
  for(var i=0;i<hexes.length;i++){
    var h=hexes[i];
    ctx.beginPath();
    ctx.moveTo(h.points[0].x,h.points[0].y);
    for(var j=1;j<h.points.length;j++){
      ctx.lineTo(h.points[j].x,h.points[j].y);
    }
    ctx.closePath();
    ctx.stroke();
  }
}


function handleMouseDown(e){
  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();

  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);

  for(var i=0;i<hexes.length;i++){
    var h=hexes[i];
    ctx.beginPath();
    ctx.moveTo(h.points[0].x,h.points[0].y);
    for(var j=1;j<h.points.length;j++){
      ctx.lineTo(h.points[j].x,h.points[j].y);
    }
    ctx.closePath();
    //if(ctx.isPointInPath(mouseX,mouseY)){ window.open(h.url, '_blank'); }
    if(ctx.isPointInPath(mouseX,mouseY)){ alert('Navigate to: '+h.url); }
  }
}

body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Click in the hexagon to navigate to Stackoverflow.com</h4>
<canvas id="canvas" width=300 height=300></canvas>