使用海伦公式判断触摸点是否在某一区域内

这里以四边形为例:

第一步:确定区域的四个点的坐标

var px = Number(($(this).offset().left).toFixed(2));
var py = Number($(this).offset().top.toFixed(2));

...假设这里获取到的坐标为

触摸点坐标:var point = [parseInt(positionx),parseInt(positiony)];
区域四个点的横纵坐标:var arrtr1 = [[parseInt($("td:eq(0)").attr('px')),parseInt($("td:eq(0)").attr('py'))],
[parseInt($("td:eq(2)").attr('px1')),parseInt($("td:eq(2)").attr('py1')-10)],
[parseInt(+$("td:eq(6)").attr('px1')+20),parseInt(+$("td:eq(6)").attr('py1')+70)],
[parseInt(+$("td:eq(8)").attr('px1')+70),parseInt(+$("td:eq(8)").attr('py1')+40)]];

 以上点的顺序为:左上,右上,左下,右下四个点

 

可以使用四个小div测试定位好四个点的位置

<div id="a" style="position:fixed;border:3px solid red"></div>
<div id="b" style="position:fixed;border:3px solid green""></div>
<div id="c" style="position:fixed;border:3px solid blue""></div>
<div id="d" style="position:fixed;border:3px solid yellow""></div>

// $('#a').css({'left':arrtr1[0][0]+'px','top':arrtr1[0][1]+'px'});
// $('#b').css({'left':arrtr1[1][0]+'px','top':arrtr1[1][1]+'px'});
// $('#c').css({'left':arrtr1[2][0]+'px','top':arrtr1[2][1]+'px'});
// $('#d').css({'left':arrtr1[3][0]+'px','top':arrtr1[3][1]+'px'});

 

获取区域四个点tr1s = trs(arrtr1);

勾股定理计算第三条边的长度

function getA(arr1,arr2) {
　var line1 = Math.abs(arr1[0] - arr2[0]);
　var line2 = Math.abs(arr1[1] - arr2[1]);
   return Math.sqrt(line1*line1+line2*line2);
}

海伦公式计算出两个三角形的面积

function s(a,b,c){
   return parseInt(Math.sqrt((a+b+c)*(a+b-c)*(a+c-b)*(b+c-a)));
}

function trs(arr){
   var a = getA(arr[0],arr[1]);
   var b = getA(arr[0],arr[2]);
   var c = getA(arr[1],arr[2]);
   var d = getA(arr[3],arr[1]);
   var e = getA(arr[3],arr[2]);
   return [s(a,b,c),s(c,d,e)];
}

最终获得下面两个三角形的面积

图一

计算触摸点到四个组成的三角形面积

function spoint(arr,point){
　var a = getA(arr[0],arr[1]);
   var b = getA(arr[1],arr[2]);
   var c = getA(arr[0],arr[2]);
   var d = getA(point,arr[0]);
   var e = getA(point,arr[1]);
   var f = getA(point,arr[2]);
   var g = getA(arr[1],arr[3]);
   var h = getA(arr[2],arr[3]);
   var i = getA(point,arr[1]);
   var j = getA(point,arr[2]);
   var k = getA(point,arr[3]);
   var s1 = s(a,d,e);
   var s2 = s(d,f,c);
   var s3 = s(e,f,b);
   var s11 = s(b,i,j);
   var s22 = s(i,k,g);
   var s33 = s(j,k,h);
   return [s1+s2+s3,s11+s22+s33];
}

 

var tr1sp = spoint(arrtr1,point);

 图二

 

 

判断图二中触摸点与四点组合成的s1+s2或s22+s33面积是否接近图一的s(a,b,c)或s(c,d,e),如果接近,这该触摸点在区域矩形内

if(((tr1sp[0]-5<tr1s[0] && tr1s[0]<tr1sp[0]+5) || (tr1sp[1]-5<tr1s[1] && tr1s[1]<tr1sp[1]+5))){

　　执行函数

}