2017-03-29 5 views
1

나는 지난 몇 주 동안 fabricjs로 일해 왔으며 내가 겪고있는 문제에 대한 해결책을 찾지 못했습니다. 개체가 있고 그 주위의 영역이 "비어 있는지"(개체가 없음) 프로그래밍 방식으로 결정하고 싶습니다. 따라서 개체를 추가하면 교차하지 않습니다.fabrics에서 개체가 이미 특정 좌표에 있는지 확인하는 방법은 무엇입니까?

canvas.findTarget과 다른 "가상"개체를 가지고 놀았지만 아무 것도 작동하지 않습니다.

이것은 내가 찾은 솔루션입니다 :

var targetPoint = new fabric.Point(target.left + offset + 1, target.top + 1); 
      if (obj.containsPoint(targetPoint)) { 
      objectOnRight = obj; 
      } 

안부, 알렉스

답변

1

이것은 당신이 사실을 (과거에 내가 사용했던 몇 가지 코드는, 상황에 맞는 메뉴를 표시 할 수 있어야) :

fabric.util.addListener(document.getElementsByClassName('upper-canvas')[0], 'contextmenu', function (env) { 
    var x = env.offsetX; 
    var y = env.offsetY; 
    var itemIndex = -1; 
    $.each(canvas.getObjects(), function (i, e) { 
     // e.left and e.top are the middle of the object use some "math" to find the outer edges 
     if (e.selectable && e.id != 'canvasNumbers') { 
      var d = e.width * e.scaleX/2; 
      var h = e.height * e.scaleY/2; 
      if (x >= (e.left - d) && x <= (e.left + d)) { 
       if (y >= (e.top - h) && y <= (e.top + h)) { 
        itemIndex = i; 
       } 
      } 
     } 
    }); 
    if (itemIndex > -1) { 
     canvas.setActiveObject(canvas.getObjects()[itemIndex]); 
     canvasSelectedItem = canvas.getObjects()[itemIndex]; 
     $('.contextmenu').css({ 
      top: env.pageY + 'px', 
      left: env.pageX + 'px' 
     }).show(); 
    } 
    env.preventDefault(); 
    return false; //stops the event propigation 
}); 

추가 질문이 있으면 알려주십시오. 더 많은 것을 도와 드리겠습니다!

+0

안녕하세요, Tim 님과 답장을 보내 주셔서 감사합니다. 이 코드가 올바르게 이해되면 기존 요소와 겹치지 않고 문맥 메뉴를 표시합니다. 저는 캔버스 객체를 반복하면서 비슷한 접근법을 시도하고 있습니다. 여러분의 코드에서 본 것을 기반으로하는 해결책을 가지고 있다면 다시 생각해 볼 것입니다. 감사! –

+0

정확하고 걱정할 필요가 없습니다. 코드를 '소화'한 후에는 제게 돌아 가세요 :-). 나는 희망을 갖고 더 멀리 도울 수있다. –

+1

안녕, 팀! 당신이 제시 한 것에 기반한 해결책을 찾았습니다. 내가 추가 할 객체에 상대적인 점을 생성하고 캔버스 객체에 해당 점이 있는지 확인합니다. 원래 게시물에 예제 코드를 추가했습니다. –

관련 문제