fabric에서 마우스를 통해 피사체를 선택하는 방법은 무엇입니까?

Question

나는 아래에 쌓여 있고 (완전히) 다른 물체로 덮여있는 물체를 선택하는 방법을 개발하려고합니다. 하나의 아이디어는 상단 개체를 선택한 다음 doubleclick을 통해 레이어를 아래쪽으로 이동하는 것입니다. 이것은 내가 지금 무엇을 가지고 있습니다 : 당신이 볼 수 있듯이, blue 하나 내에서 red 사각형을 선택하려고하면 작동하지 않습니다

var canvas = new fabric.Canvas("c"); 
 

 
fabric.util.addListener(canvas.upperCanvasEl, "dblclick", function (e) { 
 
    var _canvas = canvas; 
 
    var _mouse = _canvas.getPointer(e); 
 
    var _active = _canvas.getActiveObject(); 
 
    
 
    if (e.target) { 
 
    var _targets = _canvas.getObjects().filter(function (_obj) { 
 
     return _obj.containsPoint(_mouse); 
 
    }); 
 
     
 
    //console.warn(_targets); 
 
     
 
    for (var _i=0, _max=_targets.length; _i<_max; _i+=1) { 
 
     //check if target is currently active 
 
     if (_targets[_i] == _active) { 
 
     \t //then select the one on the layer below 
 
     \t _targets[_i-1] && _canvas.setActiveObject(_targets[_i-1]); 
 
     break; 
 
     } 
 
     } 
 
    } 
 
}); 
 

 
canvas 
 
    .add(new fabric.Rect({ 
 
    top: 25, 
 
    left: 25, 
 
    width: 100, 
 
    height: 100, 
 
    fill: "red" 
 
    })) 
 
    .add(new fabric.Rect({ 
 
    top: 50, 
 
    left: 50, 
 
    width: 100, 
 
    height: 100, 
 
    fill: "green" 
 
    })) 
 
    .add(new fabric.Rect({ 
 
    top: 75, 
 
    left: 75, 
 
    width: 100, 
 
    height: 100, 
 
    fill: "blue" 
 
    })) 
 
    .renderAll();

canvas { 
 
border: 1px solid; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.3/fabric.min.js"></script> 
 
<canvas id="c" width="300" height="200"></canvas>

. green 또는 blue 만 선택할 수 있습니다. 첫 번째 doubleclick (green 선택)을 클릭 한 후 다시 클릭하면 blue이 선택되어 다음 더블 클릭으로 green 만 다시 수신 할 수 있다고 추측합니다.

이 방법이 있습니까? 다른 아이디어?

Answer 1

얼마 후 나는 혼자서 그것을 마침내 해결할 수있었습니다. 객체를 클릭하면 맨 위로 이동합니다. 두 번 클릭하면 현재 개체 뒤에 한 레이어의 개체를 가져 오려고합니다. 다른 dblclick에서 나는 뒤에 하나를 얻는다. 나를 위해 훌륭하게 작동하며 다른 사람들을 옮길 필요없이 완전히 덮힌 물건을 선택할 수 있습니다.

var canvas = new fabric.Canvas("c"); 
 

 
canvas.on("object:selected", function (e) { 
 
    if (e.target) { 
 
    e.target.bringToFront(); 
 
    this.renderAll(); 
 
    } 
 
}); 
 

 
var _prevActive = 0; 
 
var _layer = 0; 
 

 
// 
 
fabric.util.addListener(canvas.upperCanvasEl, "dblclick", function (e) { 
 
    var _canvas = canvas; 
 
    //current mouse position 
 
    var _mouse = _canvas.getPointer(e); 
 
    //active object (that has been selected on click) 
 
    var _active = _canvas.getActiveObject(); 
 
    //possible dblclick targets (objects that share mousepointer) 
 
    var _targets = _canvas.getObjects().filter(function (_obj) { 
 
     return _obj.containsPoint(_mouse) && !_canvas.isTargetTransparent(_obj, _mouse.x, _mouse.y); 
 
    }); 
 
    
 
    _canvas.deactivateAll(); 
 
     
 
    //new top layer target 
 
    if (_prevActive !== _active) { 
 
     //try to go one layer below current target 
 
     _layer = Math.max(_targets.length-2, 0); 
 
    } 
 
    //top layer target is same as before 
 
    else { 
 
     //try to go one more layer down 
 
     _layer = --_layer < 0 ? Math.max(_targets.length-2, 0) : _layer; 
 
    } 
 

 
    //get obj on current layer 
 
    var _obj = _targets[_layer]; 
 

 
    if (_obj) { 
 
    \t _prevActive = _obj; 
 
    \t _obj.bringToFront(); 
 
    \t _canvas.setActiveObject(_obj).renderAll(); 
 
    } 
 
}); 
 

 
//create something to play with 
 
canvas 
 
    //fully covered rect is selectable with dblclicks 
 
    .add(new fabric.Rect({ 
 
    top: 75, 
 
    left: 75, 
 
    width: 50, 
 
    height: 50, 
 
    fill: "black", 
 
    stroke: "black", 
 
    globalCompositeOperation: "xor", 
 
    perPixelTargetFind: true 
 
    })) 
 
    .add(new fabric.Circle({ 
 
    top: 25, 
 
    left: 25, 
 
    radius: 50, 
 
    fill: "rgba(255,0,0,.5)", 
 
    stroke: "black", 
 
    perPixelTargetFind: true 
 
    })) 
 
    .add(new fabric.Circle({ 
 
    top: 50, 
 
    left: 50, 
 
    radius: 50, 
 
    fill: "rgba(0,255,0,.5)", 
 
    stroke: "black", 
 
    perPixelTargetFind: true 
 
    })) 
 
    .add(new fabric.Circle({ 
 
    top: 75, 
 
    left: 75, 
 
    radius: 50, 
 
    fill: "rgba(0,0,255,.5)", 
 
    stroke: "black", 
 
    perPixelTargetFind: true 
 
    })) 
 
    .renderAll();

canvas { 
 
border: 1px solid; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.4/fabric.min.js"></script> 
 
<canvas id="c" width="300" height="200"></canvas>