Draw Polygon Shape On Canvas And Allow Tooltip On It
Solution 1:
As well as maintaining the canvas that the user sees, draw everything on a second canvas that is hidden. The important thing is that each polygon should be in its own colour. It doesn't have to be human-distinguishable - you could draw the first as #000000, the second #000001, and so on. This provides support for 16 million polygons - should be enough!
Then, when the user moves the mouse over the canvas, find out the position of the mouse and look at what colour is there on your hidden canvas. This will tell you which shape is being hovered over, and you can act accordingly.
Solution 2:
You can use canvas's built in hit-testing method: context.isPointInPath(x,y);
isPointInPath will test if x,y is inside the most recently defined path.
It works like this:
Presumably you have the coordinates that define each polygon
// create an object holding all polygon pointsvar triangle=[{x:100,y:50},{x:150,y:100},{x:50,y:100}];
To do the hit-test, first redefine the triangle:
// define the polygon
function define(polygon){
ctx.beginPath();
ctx.moveTo(polygon[0].x,polygon[0].y);
for(var i=1;i<polygon.length;i++){
ctx.lineTo(polygon[i].x,polygon[i].y);
}
ctx.closePath();
}
Then use isPointInPath to check whether any x,y is inside that redefined triangle
console.log( ctx.isPointInPath(mouseX,mouseY); );
Here's example code and a Demo: http://jsfiddle.net/m1erickson/d3kdf/
<!doctype html><html><head><linktype="text/css"media="all"href="css/reset.css" /><!-- reset css --><scripttype="text/javascript"src="http://code.jquery.com/jquery.min.js"></script><style>body{ background-color: ivory; }
#canvas{border:1px solid red;}
</style><script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var $canvas=$("#canvas");
var canvasOffset=$canvas.offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var scrollX=$canvas.scrollLeft();
var scrollY=$canvas.scrollTop();
var $results=$("#results");
// create an object holding all polygon pointsvar triangle=[{x:100,y:50},{x:150,y:100},{x:50,y:100}];
// draw the polygondefine(triangle);
ctx.fill();
// define the polygonfunctiondefine(polygon){
ctx.beginPath();
ctx.moveTo(polygon[0].x,polygon[0].y);
for(var i=1;i<polygon.length;i++){
ctx.lineTo(polygon[i].x,polygon[i].y);
}
ctx.closePath();
}
functionhitTest(polygon){
// redefine the polygon// (necessary to isPointInPath to workdefine(polygon);
// ask isPointInPath to hit test the mouse position// against the current pathreturn(ctx.isPointInPath(mouseX,mouseY));
}
functionhandleMouseMove(e){
e.preventDefault();
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// check if the mouse is inside the polygonvar isInside=hitTest(triangle);
if(isInside){
$results.text("Mouse is inside the Triangle");
}else{
$results.text("Outside");
}
}
$("#canvas").mousemove(function(e){handleMouseMove(e);});
}); // end $(function(){});</script></head><body><pid="results">Hit results</p><canvasid="canvas"width=300height=300></canvas></body></html>
Post a Comment for "Draw Polygon Shape On Canvas And Allow Tooltip On It"