JavaScript
var params = [
{
title : 'test',
status : 0,
size : 1200,
coords : [
[10,10],
[40,10],
[40,40],
[10,40]
]
},
{
title : 'test2',
status : 1,
size : 1300,
coords : [
[60,10],
[100,10],
[100,60],
[60,60]
]
},
{
title : 'test3',
status : 2,
size : 1400,
coords : [
[50,120],
[100,110],
[100,70],
[60,70]
]
},
{
title : 'test',
status : 0,
size : 1200,
coords : [
[309,121],
[352,139],
[337,173],
[295,153]
]
},
];
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var img = new Image();
img.src = 'http://i.imgur.com/Lhi1zg6.jpg';
img.onload = function() {
context.drawImage(img, 0, 0);
context.beginPath();
for(var i=0,j=params.length; i<j; i++)
{
for(var k=0,c=params[i].coords,l=c.length; k<l; k++)
{
if(k == 0)
context.moveTo( c[0][0], c[0][1] );
else
context.lineTo( c[k][0], c[k][1] );
if(k+1 == l)
context.lineTo( c[0][0], c[0][1] );
}
}
context.strokeStyle = '#f00';
context.stroke();
context.closePath();
};
function getCursorPosition(e)
{
var x, y, z, d = document;
if(e.pageX != z && e.pageY != z)
{
x = e.pageX;
y = e.pageY;
}
else
{
x = e.clientX + d.body.scrollLeft + d.documentElement.scrollLeft;
y = e.clientY + d.body.scrollTop + d.documentElement.scrollTop;
}
x -= canvas.offsetLeft;
y -= canvas.offsetTop;
return{x:x, y:y}
}
canvas.onclick = function(e)
{
var coords = getCursorPosition(e);
for(var i=0,j=params.length; i<j; i++)
{
var k=0, c=params[i].coords, l=c.length, flags = 0;
for(; k<l; k++)
{
if( c[k][0] > coords.x || c[k][1] > coords.y )
flags++;
}
if(1 <= flags && flags <= l-1 )
{
//alert(i+' k '+flags)
alert(flags+' - ['+i+'] - '+coords.x+','+coords.y+' / '+params[i].coords)
}
}
}