PIXI 根据点走地图（8）

最新推荐文章于 2024-09-14 09:24:54 发布

转载最新推荐文章于 2024-09-14 09:24:54 发布 · 664 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/congxueda/p/9506809.html

本文介绍了一种基于地图坐标点实现物体沿预设路径移动的方法。通过计算物体在不同坐标点间移动的比例，实现了平滑的动画效果。具体步骤包括确定物体在路径上的位置、计算两点间的距离以及使用jQuery进行动画展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先了解下数学公式例如：

图已知:a、b两点的坐标, c到a的距离d 。求c点的坐标。

求 cy 可以根据d / a到b距离 = a到c垂直距离 / a 到 b的垂直距离。

首先求a到b的距离

r = sqrt((x1- x2)*(x1 - x2) +(y1 - y2)*(y1 - y2));

cy = (d*(y2-y1))/r + y1;

同理可得

cx = (d*(x2-x1))/r + x1;

思路也是根据这个公式来进行的借用下。

下图，运动坐标点，红色是运动物体，虚点是路径

1、定义坐标点：A、B、C、D ...取到每个坐标点的值

 var pointArr = [
    {x: 342, y: 702},
    {x: 171, y: 532},
    {x: 335, y: 415},
    {x: 172, y: 285}
  ];

2、指定变量，例如:AB两点假定距离为200（每段距离固定），行走的步数为 500

 // 假设两点之间距离步数
  var targetStep = 200;

  // 行走步数
  var walkingStep = 500;

3、计算500属于地图上那个一段

  /**
   *
   * @param stepNum 已走步数
   * @param val   区间值固定值 200
   */
  function sectionVal(stepNum, val){
    return stepNum%val==0?stepNum/val:Math.ceil(stepNum/val)
  }

4、返回两点距离

  /**
   *
   * @param pointA 起始点
   * @param pointB 第二个点
   * @returns {number}  两点距离
   */
  function pointDist(pointA, pointB){
//   return  Math.sqrt((x1- x2)*(x1 - x2) +(y1 - y2)*(y1 - y2));
   return  Math.sqrt((pointA.x- pointB.x)*(pointA.x - pointB.x) +(pointA.y - pointB.y)*(pointA.y - pointB.y));
  }

5、两点之间，d点的距离

  function posPoint(walkCount, r){
    var nextPos = walkCount / (targetStep / r);
    return nextPos
  }

例如：

a点到b点假定为：200步；

a点到b点实际为100长

走100步， ab实际位置应该：100/(200/100)

  function posPoint(walkCount, r){
    var nextPos = walkCount / (targetStep / r);
    return nextPos
  }

6、根据ab点上行走实际步数d，

  function nextDis(pointA, pointB, d, r){
    cx = (d*(pointB.x-pointA.x))/r + pointA.x;
    cy = (d*(pointB.y-pointA.y))/r + pointA.y;
    return {
      x: cx,
      y: cy
    }
  }

  // TODO 开始行走步数 300

  // =========属于那个区间？=========
  var sectionVal = sectionVal(walkingStep, targetStep);
  console.log(sectionVal); // 2
  var idx = 1;

  // 开始执行动画
  startSpeed(targetStep);

  function startSpeed(step){
    var r = pointDist(pointArr[idx-1], pointArr[idx]);
//    var d = posPoint(200, r); // 行走步数、 r两点距离  返回：直线的距离

    if(idx != sectionVal){
      var d = posPoint(step, r); // 行走步数、 r两点距离  返回：直线的距离
      var movePoint = nextDis(pointArr[idx-1], pointArr[idx], d, r); //d 距离; r两点之间距离
      $('.sportPoint').animate({
        left: movePoint.x,
        top: movePoint.y
      },2000, 'linear',function(){
        idx++;
        startSpeed(targetStep);
      });
    }else{
      var residualValue = walkingStep%targetStep == 0? targetStep : walkingStep%targetStep;

      var d1 = posPoint(residualValue, r);
      var movePoint1 = nextDis(pointArr[idx-1], pointArr[idx], d1, r); //d 距离; r两点之间距离
      $('.sportPoint').animate({
        left: movePoint1.x,
        top: movePoint1.y
      },2000, 'linear',function(){
//        alert('end')
      });
    }
  }

------------------------------------------------

初始步数，从指定步数移动点

首先，根据初始步数，知道该步数在那一个路线上（1区间）。例如100步数

ab 两点距离为100， 200ab两点的目标步数

var step = 100/(200/100 ); // 50是 100步，在ab两点行走的距离d;

知道，ab两点距离及d 能求出d点的坐标。就是该点。

从d点坐标执行下个点移动，也就是当前点，

举例

100在第一区间，值为 1 ，在数组中表示为 [ 0 ] , [ 1 ], 找到区间中间坐标点。开始向下个点移动 [ 1 ] ,也就是值 1；

先这样理解这。

在PIXI表现也是一样的。创建舞台添加进舞台上，让坐标点移动。

实现上。。。。。想到那就写到那。。。不是很好。但实现上可以运行参考。

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <title>地图坐标</title>
  <script src="jquery-2.1.4.min.js"></script>

  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .bg{
      background: url(map.jpg) no-repeat;
      width: 500px;
      height: 800px;
      position: relative;
      font-size: 30px;
    }
    .pointA{
      position: absolute;
      top: 702px;
      left:342px;
      border: 1px solid blue;
      display: inline-block;
    }

    .pointB{
      position: absolute;
      top: 532px;
      left:171px;
      border: 1px solid blue;
      display: inline-block;
    }


    .pointC{
      position: absolute;
      top: 419px;
      left:335px;
      border: 1px solid blue;
      display: inline-block;
    }
    .pointD{
      position: absolute;
      top: 288px;
      left:176px;
      border: 1px solid blue;
      display: inline-block;
    }
    .sportPoint{
      width: 5px;
      height: 5px;
      border: 2px solid red;
      background: red;
      position: absolute;
      border-radius: 50%;
      display: inline-block;
      top: 702px;
      left:342px;
    }
  </style>
</head>
<body>
  <div class="bg">
     <span class="pointA"><b>A</b></span>
     <span class="pointB"><b>B</b></span>
     <span class="pointC"><b>C</b></span>
     <span class="pointD"><b>D</b></span>
    <span class="sportPoint"></span>
  </div>

<script>
  var pointArr = [
    {x: 342, y: 702},
    {x: 171, y: 532},
    {x: 335, y: 415},
    {x: 172, y: 285}
  ];

  // 共600步 ,每一段 200

  // 假设两点之间距离步数
  var targetStep = 200;

  // 行走步数
  var walkingStep = 500;


  //0. 计算步数属于那个区间
  /**
   *
   * @param stepNum 已走步数
   * @param val   区间值固定值 200
   */
  function sectionVal(stepNum, val){
    return stepNum%val==0?stepNum/val:Math.ceil(stepNum/val)
  }


  /**
   *
   * @param pointA 起始点
   * @param pointB 第二个点
   * @returns {number}  两点距离
   */
  function pointDist(pointA, pointB){
//   return  Math.sqrt((x1- x2)*(x1 - x2) +(y1 - y2)*(y1 - y2));
   return  Math.sqrt((pointA.x- pointB.x)*(pointA.x - pointB.x) +(pointA.y - pointB.y)*(pointA.y - pointB.y));
  }

  // 2、知道"距离"求下个点坐标
  function posPoint(walkCount, r){
    var nextPos = walkCount / (targetStep / r);
    return nextPos
  }


  //  3、根据距离，知坐标点
  function nextDis(pointA, pointB, d, r){
    cx = (d*(pointB.x-pointA.x))/r + pointA.x;
    cy = (d*(pointB.y-pointA.y))/r + pointA.y;
    return {
      x: cx,
      y: cy
    }
  }

  // TODO 开始行走步数 300

  // =========属于那个区间？=========
  var sectionVal = sectionVal(walkingStep, targetStep);
  console.log(sectionVal); // 2
  var idx = 1;

  // 开始执行动画
  startSpeed(targetStep);

  function startSpeed(step){
    var r = pointDist(pointArr[idx-1], pointArr[idx]);
//    var d = posPoint(200, r); // 行走步数、 r两点距离  返回：直线的距离

    if(idx != sectionVal){
      var d = posPoint(step, r); // 行走步数、 r两点距离  返回：直线的距离
      var movePoint = nextDis(pointArr[idx-1], pointArr[idx], d, r); //d 距离; r两点之间距离
      $('.sportPoint').animate({
        left: movePoint.x,
        top: movePoint.y
      },2000, 'linear',function(){
        idx++;
        startSpeed(targetStep);
      });
    }else{
      var residualValue = walkingStep%targetStep == 0? targetStep : walkingStep%targetStep;

      var d1 = posPoint(residualValue, r);
      var movePoint1 = nextDis(pointArr[idx-1], pointArr[idx], d1, r); //d 距离; r两点之间距离
      $('.sportPoint').animate({
        left: movePoint1.x,
        top: movePoint1.y
      },2000, 'linear',function(){
//        alert('end')
      });
    }
  }

  // 从指定点开始移动，假设B点

</script>
</body>
</html>

转载于:https://www.cnblogs.com/congxueda/p/9506809.html