我使用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 但我无法发展它
答案 0 :(得分:1)
您可以使用context.isPointInPath
测试鼠标单击的六边形。
.isPointInPath(mouseX,mouseY)
查看鼠标是否单击此十六进制。window.open(theUrl, '_blank')
导航至其关联的网址。在Hexagon工具中,每个十六进制都有points
属性,您可以使用该属性来重新接收每个十六进制路径。
以下是示例代码和演示:
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>