1

我正在用 Fabricjs 制作图像编辑器。当您单击它时，我制作了一个手柄（蓝色圆圈），它隐藏了选定的对象。

一切正常....但是： 移动对象后，我无法单击蓝色圆圈

在移动过程中，必须隐藏控件和边框。

我的小提琴

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;    
}
4

1 回答 1

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;    
}
于 2013-04-26T13:29:03.167 回答