首页 > 解决方案 > 在 2 点 X 和 Y 位置之间创建 NICE(随机)路径

问题描述

使用:Javascript,HTML5 Canvas 上的 kinetic.js

你好

我已经做了很多搜索和测试我发现的其他建议,但似乎没有一个对我有用。

我正在尝试创建一个包含对象的 x 和 y 数组,如下所示:

{x:695 , y:363},{x:774 , y:609},{x:654 , y:42},{x:991 , y:213},{x:788 , y:172}

我想在画布上绘制这些点(大约 70 - 100)并在它们之间绘制一条线。我的观点有一个明确的起点和终点,我在标题“NICE”中的意思是这样的:

带有跟踪器画布的地图

正如您在图像中看到的(通过定义点创建),这条线是波浪形的,并不是真正相交的,这就是我所说的好!

我不想只创建一条直接路径。

我尝试了各种方法来创建两个主要点之间的随机点,但我最终还是一团糟

看起来不漂亮

这是最新的尝试:

var path;

  while (count) {
   randomx = Math.floor(Math.random() * 1280) + 0;  
   randomy = Math.floor(Math.random() * 720) + 0;

  obj = []
  obj['x']= randomx;
  obj['y']= randomy;

  path.push(obj);
  count--;
  }

  function custom_compare (a,b) {
    return a.value - b.value;
  }

  path.sort(custom_compare).reverse();

  obj = []
  obj['x']= 486;
  obj['y']= 54;
  path.push(obj);

我想我已经知道这行不通,但是我尝试了很多方法来创建与我的第一张图片中的路径相似的路径。

如果有人可以建议我如何最好地创建这条路径,那将非常有帮助

谢谢

标签: javascriptarraysposition

解决方案


推荐阅读