Easeljs对齐网格

时间:2015-06-09 08:31:32

标签: javascript canvas drag-and-drop easeljs createjs

我正在使用HTML5构建应用程序,其中绘制了网格。我有一些你可以移动的形状。 我想要做的是将对象捕捉到移动形状时悬停它们时定义的某些点。 我尝试的是将锚点保存在数组中,当形状被删除时,我在最近的锚点上绘制形状。 Easeljs是我的主要js lib所以我想保留它,但如果需要我可以使用另一个与easeljs。

提前感谢您的帮助!

1 个答案:

答案 0 :(得分:4)

这非常简单:

  1. 遍历每个点,并获得与鼠标的距离
  2. 如果项目比其他项目更近,请将对象设置为其位置
  3. 否则请抓住鼠标
  4. 以下是使用最新EaselJS的快速示例:http://jsfiddle.net/lannymcnie/qk1gs3xt/

    距离检查如下:

    // Determine the distance from the mouse position to the point
    var diffX = Math.abs(event.stageX - p.x);
    var diffY = Math.abs(event.stageY - p.y); 
    var d = Math.sqrt(diffX*diffX + diffY*diffY);        
    
    // If the current point is closeEnough and the closest (so far)
    // Then choose it to snap to.
    var closest = (d<snapDistance && (dist == null || d < dist));
    if (closest) {
         neighbour = p;          
    }
    

    快照非常简单:

    // If there is a close neighbour, snap to it. 
    if (neighbour) {
        s.x = neighbour.x;
        s.y = neighbour.y;
    
    // Otherwise snap to the mouse
    } else {
        s.x = event.stageX;
        s.y = event.stageY;
    }
    

    希望有所帮助!

寻找你感兴趣的贴纸↓↓↓
豫ICP备18024241号-1