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 相关文章推荐
不错的JS中变量相关的细节分析
Aug 13 Javascript
JavaScript 5 新增 Array 方法实现介绍
Feb 06 Javascript
JS中Iframe之间传值及子页面与父页面应用
Mar 11 Javascript
JS写的贪吃蛇游戏(个人练习)
Jul 08 Javascript
javascript实现单击和双击并存的方法
Dec 13 Javascript
js代码验证手机号码和电话号码是否合法
Jul 30 Javascript
原生JS实现图片左右轮播
Dec 30 Javascript
用Webpack构建Vue项目的实践
Nov 07 Javascript
浅谈vue方法内的方法使用this的问题
Sep 15 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
Mar 19 Javascript
Webpack中loader打包各种文件的方法实例
Sep 03 Javascript
关于layui 下拉列表的change事件详解
Sep 20 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
php_xmlhttp 乱码问题解决方法
2009/08/07 PHP
PHP获取毫秒级时间戳的方法
2015/04/15 PHP
PHP仿微信多图片预览上传实例代码
2016/09/13 PHP
php实现图片以base64显示的方法
2016/10/13 PHP
JavaScript 原型链学习总结
2010/10/29 Javascript
25个优雅的jQuery Tooltip插件推荐
2011/05/25 Javascript
js中for in的用法示例解析
2013/12/25 Javascript
中文输入法不触发onkeyup事件的解决办法
2014/07/09 Javascript
jquery向上向下取整适合分页查询
2014/09/06 Javascript
JavaScript前补零操作实例
2015/03/11 Javascript
JavaScript判断是否为数字的4种方法及效率比较
2015/04/01 Javascript
删除javascript所创建子节点的方法
2015/05/21 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
2015/11/03 Javascript
BootStrap制作导航条实例代码
2016/05/06 Javascript
如何使用Vuex+Vue.js构建单页应用
2016/10/27 Javascript
基于Nodejs利用socket.io实现多人聊天室
2017/02/22 NodeJs
jQuery实现上传图片前预览效果功能
2017/08/03 jQuery
vue中keep-alive的用法及问题描述
2018/05/15 Javascript
vue下history模式刷新后404错误解决方法
2018/08/18 Javascript
js脚本中执行java后台代码方法解析
2019/10/11 Javascript
javaScript中indexOf用法技巧
2019/11/26 Javascript
分析Python中设计模式之Decorator装饰器模式的要点
2016/03/02 Python
Python爬虫之模拟知乎登录的方法教程
2017/05/25 Python
浅谈Python type的使用
2019/11/19 Python
基于python 凸包问题的解决
2020/04/16 Python
Python基于pillow库实现生成图片水印
2020/09/14 Python
Python中对象的比较操作==和is区别详析
2021/02/12 Python
*p++ 自增p 还是p所指向的变量
2016/07/16 面试题
三项教育活动实施方案
2014/03/30 职场文书
租赁意向书范本
2014/04/01 职场文书
个人安全生产承诺书
2014/05/22 职场文书
三严三实学习心得体会(精选N篇)
2016/01/05 职场文书
2016年安康杯竞赛活动总结
2016/04/05 职场文书
小公司融资,商业计划书的8切记
2019/07/15 职场文书
纯 CSS 自定义多行省略的问题(从原理到实现)
2021/11/11 HTML / CSS
MySQL七大JOIN的具体使用
2022/02/28 MySQL