创建没有其他人存在的形状

时间:2016-04-17 23:55:31

标签: createjs easeljs

我正在尝试使用CreateJS创建一种其他人不存在的形状的方法。在这种情况下,我不太确定从哪里开始或甚至搜索什么。基本上,我的目标是让圈子出现在舞台上,但只有在其他人不在的地方。

我的问题是,有什么好方法可以解决这个问题?是否有任何文档或类似文件可以帮助我创建代码来执行此操作?

Link to JSFiddle

var stage = new createjs.Stage("canvas"),
    canvas = stage.canvas;

function createCircle(){
    var circle = new createjs.Shape().set({name:"circle"});    
    circle.graphics
        .beginFill("DeepSkyBlue")
      .drawCircle(0, 0, 25);
    circle.x = Math.random() * canvas.width;
        circle.y = Math.random() * canvas.height;    
    stage.addChild(circle);
}

setInterval(function(){ 
    createCircle();
  stage.update();
  }, 1000);

1 个答案:

答案 0 :(得分:0)

这是一个非常简单的演示,可以填充圆圈,确保它们不会碰到。

  1. 生成随机圆圈大小
  2. 随机选择x / y
  3. 检查与其他圈子的距离
  4. 如果没有触摸,请在该点绘制圆圈。如果碰到了,请再试一次
  5. http://jsfiddle.net/lannymcnie/2o7do8kf/1/

    // Basic distance checking
    var circle = circles[i], 
      dX = circle.x - x, 
      dY = circle.y - y,    
      dist = Math.sqrt(dX*dX + dY*dY);
    if (dist <= size + circle.size) {
      ok = false; 
      break;
    }
    

    此演示将尝试100次(最大)来定位每个圆圈。如果它超过100,它将完全放弃。你可以将它增加到10,000,它基本上得到相同的结果。

    这显然不是最有效或最复杂的方法,但它可能会得到足够接近你正在寻找的东西而不会发疯。

相关问题