首页 > 编程语言 > javascript实现多边形碰撞检测
2020
10-28

javascript实现多边形碰撞检测

javascript多边形碰撞检测

原理就是 循环每个顶点判断是不是在多边形内

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
const app = new PIXI.Application({ antialias: true });
document.body.appendChild(app.view);
 
const graphics = new PIXI.Graphics();
 
 
// draw polygon
const path = [600, 370, 700, 460, 780, 420, 730, 570, 590, 520];
 
graphics.lineStyle(0);
graphics.beginFill(0x3500FA, 1);
graphics.drawPolygon(path);
graphics.endFill();
 
app.stage.addChild(graphics);
 
 var xuanzhuan = PIXI.Sprite.from('/moban/images/share.jpg');
 xuanzhuan.width=120;
 xuanzhuan.height=120;
 xuanzhuan.x=13;
 xuanzhuan.y=33;
  app.stage.addChild(xuanzhuan);
 
 
  xuanzhuan.interactive = true;
 
  xuanzhuan.buttonMode = true;
   xuanzhuan
    .on('pointerdown', onDragStart)
    .on('pointerup', onDragEnd)
    .on('pointerupoutside', onDragEnd)
    .on('pointermove', onDragMove);
 
  function onDragStart(event) {
  // store a reference to the data
  // the reason for this is because of multitouch
  // we want to track the movement of this particular touch
  this.data = event.data;
  this.alpha = 0.5;
  this.dragging = true;
}
 
function onDragEnd() {
  this.alpha = 1;
  this.dragging = false;
  // set the interaction data to null
  this.data = null;
}
   var  posPolygon=[];
     var dianlist={};
    dianlist['x']=600;
    dianlist['y']=370;
    posPolygon.push(dianlist)
  var dianlist={};
    dianlist['x']=700;
    dianlist['y']=460;
    posPolygon.push(dianlist) 
  var dianlist={};
    dianlist['x']=780;
    dianlist['y']=420;
    posPolygon.push(dianlist)  
  var dianlist={};
    dianlist['x']=730;
    dianlist['y']=570;
   posPolygon.push(dianlist)
  var dianlist={};
    dianlist['x']=590;
    dianlist['y']=520;
    posPolygon.push(dianlist)
function onDragMove() {
  if (this.dragging) {
    const newPosition = this.data.getLocalPosition(this.parent);
    this.x = newPosition.x;
    this.y = newPosition.y;
 
    var baoweihe=this.getBounds();
    var youxiajiaox=baoweihe.x+baoweihe.width;
    var youxiajiaoy=baoweihe.y+baoweihe.height;
 
    var poslist=[];
     var pos={};
    pos['x']=baoweihe.x;
    pos['y']=baoweihe.y;   
    poslist.push(pos);     
 
  var pos={};
    pos['x']=youxiajiaox;
    pos['y']=baoweihe.y;   
    poslist.push(pos);     
    var pos={};
    pos['x']=youxiajiaox;
    pos['y']=youxiajiaoy;   
    poslist.push(pos);
 
    var pos={};
    pos['x']=baoweihe.x;
    pos['y']=youxiajiaoy;   
    poslist.push(pos);   
 
      
   
    var ispengzhuang=PolygonInPolygon(poslist, posPolygon,5);
    if(ispengzhuang){
      alert('碰撞了');
    }
 
 
  }
}
 
function PolygonInPolygon(posPolygonA, posPolygonB, count){
  console.log(posPolygonA);
    var count1=posPolygonA.length;
   for(var i=0;i<count1;i++ ){
    var pos=posPolygonA[i];
      console.log(pos);
     var ispengzhuang=PointInPolygon( pos, posPolygonB, count);
     if(ispengzhuang){
      alert('碰撞了')
     }
   }
}
 
function PointInPolygon( pos, posPolygonB, count)
{
  var cross = 0; //交点个数
     
  for( var i = 0; i < count; i++ )
  {
    var p1 = posPolygon[i];
    var p2 = posPolygon[(i + 1) % count]; //下一个节点
  
    // p1p2这条边与水平线平行
    if( p1.y == p2.y )
      continue;
  
    // 交点在p1p2的延长线上
    if( pos.y < Math.min( p1.y, p2.y ) )
      continue;
  
    // 交点在p1p2的延长线上
    if( pos.y > Math.max( p1.y, p2.y ) )
      continue;
       
    // 计算交点 X 左边 ： (p2.y - p1.y)/(p2.x - p1.x) = (y - p1.y)/(x - p1.x)
    // 直线 K 值相等， 交点y = pos.y
    let x = (pos.y - p1.y) * (p2.x - p1.x) / (p2.y - p1.y) + p1.x
    // 只统计单边交点，即点的正向方向
    if(x > pos.x)
      cross ++;
  }
  
  return cross % 2 == 1;
}

以上就是javascript实现多边形碰撞检测的详细内容，更多关于javascript多边形碰撞检测的资料请关注自学编程网其它相关文章！

编程技巧