Circle mousedown移動後無法使用

Question

我正在用Fabricjs製作圖像編輯器。當你點擊它時，我做了一個句柄（藍色圓圈），它隱藏了選中的對象。

一切工作正常....但： 移動對象後，我無法點擊藍色圓圈

在運動過程中的控制和邊界已被隱藏。

My fiddle

var canvas = new fabric.Canvas('c', { hoverCursor: 'pointer', selection: false }); 
var blue = new fabric.Circle({ radius: 15, fill: '#00f', top: 300, left: 300 });  // Circle to hide/remove the object 
var red = new fabric.Circle({ radius: 50, fill: '#f00', top: 100, left: 100 }); 
var white = new fabric.Circle({ radius: 50, fill: '#ccc', top: 300, left: 100 }); 
blue.hasControls = blue.hasBorders = false; 
blue.visible = false; 
blue.name = "blue"; 
canvas.add(white, red, blue); 

var selObj; 

canvas.on({ 
    'mouse:down' : setHanlde, 
    'mouse:up' : setHanlde, 
    'object:moving' : moving, 
    'object:rotating' : updatePosition, 
    'object:scaling' : updatePosition, 
    'selection:cleared' : hideHandle, 
}); 


function setHanlde(e) { 
    obj = e.target; 
    obj.hasControls = obj.hasBorders = true; 
    if(obj.name != "blue") { 
     selObj = obj; 
     obj.setCoords(); 
     blue.setLeft(obj.oCoords.tr.x); 
     blue.setTop(obj.oCoords.tr.y); 
     blue.visible = true; 
    } else { 
     // hide/remove object 
     selObj.visible = false; 
     blue.visible = false; 
     canvas.deactivateAll().renderAll(); 
     hideHandles(); 
    } 
    canvas.renderAll(); 
} 

function updatePosition() { 
    selObj.setCoords(); 
    blue.setLeft(selObj.oCoords.tr.x); 
    blue.setTop(selObj.oCoords.tr.y); 
} 

function moving(e) { 
    e.target.hasControls = e.target.hasBorders = false; 
    blue.visible = false; 
} 

function hideHandle() { 
    blue.visible = false;  
} 

Answer 1

我已經更新您的提琴。
現在，它應該工作：
jsfiddle

var canvas = new fabric.Canvas('c', { hoverCursor: 'pointer', selection: false }); 
var blue = new fabric.Circle({ radius: 15, fill: '#00f', top: 300, left: 300 });  // Circle to hide/remove the object 
var red = new fabric.Circle({ radius: 50, fill: '#f00', top: 100, left: 100 }); 
var white = new fabric.Circle({ radius: 50, fill: '#ccc', top: 300, left: 100 }); 
blue.hasControls = blue.hasBorders = false; 
blue.visible = false; 
blue.name = "blue"; 
canvas.add(white, red, blue); 

var selObj; 

canvas.on({ 
    'mouse:down' : setHanlde, 
    'mouse:up' : setHanlde, 
    'object:moving' : moving, 
    'object:rotating' : updatePosition, 
    'object:scaling' : updatePosition, 
    'selection:cleared' : hideHandle, 
    'object:modified' : updatePosition 
}); 


function setHanlde(e) { 
    obj = e.target; 
    e.target.hasControls = e.target.hasBorders = true; 
    if(obj.name != "blue") { 
     selObj = obj; 
     obj.setCoords(); 
     blue.setLeft(obj.oCoords.tr.x); 
     blue.setTop(obj.oCoords.tr.y); 
     blue.visible = true; 
    } else { 
     // hide/remove object 
     selObj.visible = false; 
     blue.visible = false; 
     canvas.deactivateAll().renderAll(); 
     hideHandles(); 
    } 
    canvas.renderAll(); 
} 

function updatePosition() { 
    selObj.setCoords(); 
    blue.setLeft(selObj.oCoords.tr.x); 
    blue.setTop(selObj.oCoords.tr.y); 
    blue.setCoords(); 
} 

function moving(e) { 
    e.target.hasControls = e.target.hasBorders = false; 
    blue.visible = false; 
} 

function hideHandle() { 
    blue.visible = false;  
}