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 相关文章推荐
jquery 模式对话框终极版实现代码
Sep 28 Javascript
基于jquery的使ListNav兼容中文首字拼音排序的实现代码
Jul 10 Javascript
JS调用CS里的带参方法实例
Aug 01 Javascript
一个Action如何调用两个不同的方法
May 22 Javascript
Javascript 多物体运动的实现
Dec 24 Javascript
javascript基本语法
May 31 Javascript
jQuery时间日期三级联动(推荐)
Nov 27 Javascript
vue.js实现表格合并示例代码
Nov 30 Javascript
详解从Node.js的child_process模块来学习父子进程之间的通信
Mar 27 Javascript
微信小程序 slider的简单实例
Apr 19 Javascript
微信小程序自定义模态对话框实例详解
Aug 16 Javascript
Node.js API详解之 module模块用法实例分析
May 13 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数组去重的函数代码
2013/02/03 PHP
深入浅析php中sprintf与printf函数的用法及区别
2016/01/08 PHP
PHP中的self关键字详解
2019/06/23 PHP
thinkPHP5框架路由常用知识点汇总
2019/09/15 PHP
javascript Object与Function使用
2010/01/11 Javascript
jQuery 源码分析笔记(5) jQuery.support
2011/06/19 Javascript
jQuery插件分享之分页插件jqPagination
2014/06/06 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
2014/11/28 Javascript
一道JS前端闭包面试题解析
2015/12/25 Javascript
javascript实现一个简单的弹出窗
2016/02/22 Javascript
详解Javascript继承的实现
2016/03/25 Javascript
微信小程序 小程序制作及动画(animation样式)详解
2017/01/06 Javascript
Bootstrap DateTime Picker日历控件简单应用
2017/03/25 Javascript
JS设计模式之访问者模式定义与用法分析
2018/02/05 Javascript
webpack 开发和生产并行设置的方法
2018/11/08 Javascript
nodejs中request库使用HTTPS代理的方法
2019/04/30 NodeJs
vue 自定义组件的写法与用法详解
2020/03/04 Javascript
DWR内存兼容及无法调用问题解决方案
2020/10/16 Javascript
python聊天程序实例代码分享
2013/11/18 Python
利用Python中的mock库对Python代码进行模拟测试
2015/04/16 Python
Python爬虫之pandas基本安装与使用方法示例
2018/08/08 Python
python使用mitmproxy抓取浏览器请求的方法
2019/07/02 Python
Python 3 判断2个字典相同
2019/08/06 Python
Django 多表关联 存储 使用方法详解 ManyToManyField save
2019/08/09 Python
WxPython实现无边框界面
2019/11/18 Python
Python实现FLV视频拼接功能
2020/01/21 Python
使用pyecharts1.7进行简单的可视化大全
2020/05/17 Python
利用HTML5中的Canvas绘制一张笑脸的教程
2015/05/07 HTML / CSS
销售主管的自我评价分享
2014/01/03 职场文书
土建资料员岗位职责
2014/01/04 职场文书
企业年会主持词
2014/03/27 职场文书
作风建设整改方案
2014/10/27 职场文书
音乐课外活动总结
2015/05/09 职场文书
工作调动申请报告
2015/05/18 职场文书
Nginx配置https原理及实现过程详解
2021/03/31 Servers
ubuntu安装jupyter并设置远程访问的实现
2022/03/31 Python