使用海倫公式判斷觸摸點是否在某一區域內

這裏以四邊形爲例:

第一步:肯定區域的四個點的座標

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))){

　　執行函數

}