マウスクリックに最も近いオブジェクトを選択

Question

マウスのクリック位置に最も近いオブジェクトを検索したい。

これは可能ですか？

私のオブジェクトは、DOTのように非常に小さいです。だから私はそれらを選択することができなかった、私はマウスのクリック位置に最も近いオブジェクトを見つけることができると思った。

これを見つける方法はありますか？

var canvas = new fabric.Canvas('c', { selection: false }); 
var circle, isDown, origX, origY; 

    canvas.on('mouse:down', function(o){ 
     isDown = true; 
     var pointer = canvas.getPointer(o.e); 
     origX = pointer.x; 
     origY = pointer.y; 
     circle = new fabric.Circle({ 
     left: pointer.x, 
     top: pointer.y, 
     radius: 10, 
     fill: 'red', 
     selectable: false, 
     originX: 'center', originY: 'center', 
     }); 
     canvas.add(circle); 
     canvas.renderAll(); 
    }); 

    canvas.on('mouse:up', function(o){ 
     isDown = false; 
    }); 

Answer 1

canvas._objectから最も近いオブジェクトを取得できます。 ここにmouse:moveイベントです。

for (i = 0; i < canvas._objects.length; i++){ 
    if(Math.pow(canvas._objects[i].left - origX,2) + Math.pow(canvas._objects[i].top - origY,2) < minLength){ 
     minObj = canvas._objects[i]; 
     minLength = Math.pow(canvas._objects[i].left - origX,2) + Math.pow(canvas._objects[i].top - origY,2); 
    } 
    } 

FULLコードスニペット

var canvas = new fabric.Canvas('canvas', { selection: false }); 
 

 
var circle, isDown, origX, origY; 
 

 
    canvas.on('mouse:down', function(o){ 
 
     isDown = true; 
 
     var pointer = canvas.getPointer(o.e); 
 
     origX = pointer.x; 
 
     origY = pointer.y; 
 
     circle = new fabric.Circle({ 
 
     left: pointer.x, 
 
     top: pointer.y, 
 
     radius: 10, 
 
     fill: 'red', 
 
     selectable: false, 
 
     originX: 'center', originY: 'center', 
 
     }); 
 
     canvas.add(circle); 
 
     canvas.renderAll(); 
 
    }); 
 
    canvas.on('mouse:move', function(o){ 
 
     var minLength = 10000000; 
 
     var minObj = null; 
 
     var pointer = canvas.getPointer(o.e); 
 
     origX = pointer.x; 
 
     origY = pointer.y; 
 
     for (i = 0; i < canvas._objects.length; i++){ 
 
     if(Math.pow(canvas._objects[i].left - origX,2) + Math.pow(canvas._objects[i].top - origY,2) < minLength){ 
 
      minObj = canvas._objects[i]; 
 
      minLength = Math.pow(canvas._objects[i].left - origX,2) + Math.pow(canvas._objects[i].top - origY,2); 
 
     } 
 
     } 
 
     for (i = 0; i < canvas._objects.length; i++){ 
 
     if(canvas._objects[i] == minObj){ 
 
      canvas._objects[i].set({fill: 'blue'}); 
 
     }else{ 
 
      canvas._objects[i].set({fill: 'red'}); 
 
     } 
 
     } 
 
     canvas.renderAll(); 
 
    }); 
 

 
    canvas.on('mouse:up', function(o){ 
 
     isDown = false; 
 
    }); 
 
     canvas.add(new fabric.Circle({ 
 
     left: 10, 
 
     top: 10, 
 
     radius: 10, 
 
     fill: 'red', 
 
     selectable: false, 
 
     originX: 'center', originY: 'center', 
 
     })); 
 
     canvas.add(new fabric.Circle({ 
 
     left: 100, 
 
     top: 100, 
 
     radius: 10, 
 
     fill: 'red', 
 
     selectable: false, 
 
     originX: 'center', originY: 'center', 
 
     })); 
 
     canvas.renderAll();

<canvas id="canvas" width="800" height="600"></canvas> 
 
<script src = "https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script>