마우스 클릭에 가장 가까운 객체 선택

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>