javascript多边形碰撞检测详解编程语言

javascript多边形碰撞检测

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

         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; 
}

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/18770.html

(0)
上一篇 2021年7月19日
下一篇 2021年7月19日

相关推荐

发表回复

登录后才能评论