javascript实现多边形碰撞检测


Posted in Javascript onOctober 24, 2020

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

以上就是javascript实现多边形碰撞检测的详细内容,更多关于javascript多边形碰撞检测的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
javascript检查日期格式的函数[比较全]
Oct 17 Javascript
JS input 数字验证代码
Jul 30 Javascript
node.js中的fs.symlinkSync方法使用说明
Dec 15 Javascript
javascript随机显示背景图片的方法
Jun 18 Javascript
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
vue利用better-scroll实现轮播图与页面滚动详解
Oct 20 Javascript
js实现文件上传功能 后台使用MultipartFile
Sep 08 Javascript
详解webpack4之splitchunksPlugin代码包分拆
Dec 04 Javascript
小程序调用微信支付的方法
Sep 26 Javascript
Vue-cli3项目引入Typescript的实现方法
Oct 18 Javascript
封装一下vue中的axios示例代码详解
Feb 16 Javascript
Javascript文本框脚本实现方法解析
Oct 30 Javascript
解决vue scoped html样式无效的问题
Oct 24 #Javascript
vue项目查看vue版本及cli版本的实现方式
Oct 24 #Javascript
Ant Design的Table组件去除
Oct 24 #Javascript
Ant design vue table 单击行选中 勾选checkbox教程
Oct 24 #Javascript
Antd的Table组件嵌套Table以及选择框联动操作
Oct 24 #Javascript
解决Antd 里面的select 选择框联动触发的问题
Oct 24 #Javascript
ant-design-vue中的select选择器,对输入值的进行筛选操作
Oct 24 #Javascript
You might like
用文本文件制作留言板提示(上)
2006/10/09 PHP
简单的过滤字符串中的HTML标记
2006/12/25 PHP
PHP使用GIFEncoder类生成gif动态滚动字幕
2014/07/01 PHP
php中magic_quotes_gpc对unserialize的影响分析
2014/12/16 PHP
详解阿里云视频直播PHP-SDK接入教程
2020/07/09 PHP
PHP设计模式之命令模式示例详解
2020/12/20 PHP
jquery 简单的进度条实现代码
2010/03/11 Javascript
js实现飞入星星特效代码
2014/10/17 Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
2014/12/18 Javascript
jQuery选择器源码解读(七):elementMatcher函数
2015/03/31 Javascript
为什么JS中eval处理JSON数据要加括号
2015/04/13 Javascript
详解JavaScript中常用的函数类型
2015/11/18 Javascript
全面解析Bootstrap手风琴效果
2020/04/17 Javascript
js运动事件函数详解
2016/10/21 Javascript
underscore之function_动力节点Java学院整理
2017/07/11 Javascript
AngularJS select加载数据选中默认值的方法
2018/02/28 Javascript
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
2019/12/16 Javascript
在实例中重学JavaScript事件循环
2020/12/03 Javascript
[02:05]DOTA2完美大师赛趣味视频之看我表演
2017/11/18 DOTA
[00:30]明星选手化身超级英雄!2018DOTA2亚洲邀请赛全明星赛来临!
2018/04/06 DOTA
[36:22]VP vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python进程管理工具supervisor使用实例
2014/09/17 Python
Django 前后台的数据传递的方法
2017/08/08 Python
python删除服务器文件代码示例
2018/02/09 Python
Sanic框架配置操作分析
2018/07/17 Python
对python中的高效迭代器函数详解
2018/10/18 Python
浅谈python 导入模块和解决文件句柄找不到问题
2018/12/15 Python
Python3的socket使用方法详解
2020/02/18 Python
python属于软件吗
2020/06/18 Python
css3进行截取替代js的substring
2013/09/02 HTML / CSS
html5中 media(播放器)的api使用指南
2014/12/26 HTML / CSS
德国购买健身器材:AsVIVA
2017/08/09 全球购物
求职信的要素有哪些呢
2013/12/26 职场文书
遗嘱范文
2015/08/07 职场文书
2015年行政管理人员工作总结
2015/10/15 职场文书
咖啡厅里的创业计划书
2019/08/21 职场文书