選擇/取消選擇後，改變對象的顏色和mouseOver/mouseOut

Question

我試圖改變鼠標：over事件和選擇後的兩種情況下的對象的顏色： 。

如果鼠標：out事件或取消選擇正在發生，顏色應該更改爲其原始顏色。

爲此，我編寫了兩個函數：一個用於改變顏色，另一個用於將其更改回原來的顏色，該函數使用鼠標：out和mouse：over，但是當選擇對象時，rechange不會工作。

這裏是的jsfiddle一個簡單的例子：http://jsfiddle.net/98cuf9b7/25/

我的這個例子代碼：

/*_____________Event Handling_______________*/ 

canvas.on('object:selected', function(event) { 
    changeSelectedObjectColorOpacity(event.target); 
}); 
canvas.on('mouse:over', function(event) { 
    changeSelectedObjectColorOpacity(event.target); 
}); 
canvas.on('mouse:out', function(event) { 
    revertObjectColorOpacity(event.target); 
}); 
canvas.on('selection:cleared', function(event) { 
    revertObjectColorOpacity(event.target); 
}); 

/*_________Change Color function_____________*/ 

var selected_fill_color  = 'grey'; 
var selected_object_opacity = 0.5; 

function changeSelectedObjectColorOpacity(object) { 
    if (object == null) { return;} 
    original_fill_color = object.fill; 
    original_opacity = object.opacity; 

object.set({fill: selected_fill_color, opacity: selected_object_opacity}); 
canvas.renderAll(); 
} 

function revertObjectColorOpacity(object) { 
    if (object == null) { return;} 
    object.set({fill: original_fill_color, opacity: original_opacity}); 
    canvas.renderAll(); 
} 

有沒有辦法有兩個函數來解決這個問題還是我必須寫一個單獨的函數mouserOver/MouseOut和Select/Deselect的其他變量？

Answer 1

我認爲這裏有一些事情要做。首先，如果將鼠標移動到對象上，則會調用changeSelectedObjectColorOpacity（）。但是如果你點擊對象來選擇它，那麼函數會再次被調用，擦除以前顏色/不透明度的信息。

其次，對象：選中的事件可以返回一個對象或一組對象，如果你已經做了多重選擇 - 所以你需要檢查它。

我想你需要跟蹤當前選定的對象以及鼠標是否在一個對象中。

下面的代碼應該是一個開始:(小提琴here）。

var canvas = new fabric.Canvas('c'); 
var selectedObjs = []; 
var mouseIn = null; 
/*_____________Adding shapes_______________*/ 

var pol = new fabric.Polygon([ 
    { x: 100, y: 0 }, 
    { x: 150, y: 50 }, 
    { x: 150, y: 100 }, 
    { x: 50, y: 100 }, 
    { x: 50, y: 50 }], { 
     left: 50, 
     top: 150, 
     angle: 0, 
     fill: 'green' 
    } 
); 

var pol2 = new fabric.Polygon([ 
    { x: 300, y: 50 }, 
    { x: 300, y: 100 }, 
    { x: 200, y: 100 }, 
    { x: 200, y: 50 }], { 
     left: 300, 
     top: 200, 
     angle: 0, 
     fill: 'blue' 
    } 
); 
canvas.add(pol, pol2); 

/*_____________Event Handling_______________*/ 

canvas.on('object:selected', function (event) { 
    selectedObjs = []; 
    if (event.target._objects !== undefined) { 
     selectedObjs = event.target._objects; 
    } else { 
     selectedObjs.push(event.target); 
    } 
    for (i = 0; i < selectedObjs.length; i++) { 
     if (selectedObjs[i] != mouseIn) { 
      changeSelectedObjectColorOpacity(event.target); 
     } 
    } 
}); 

canvas.on('mouse:over', function (event) { 
    mouseIn = event.target; 
    var alreadySelected = false; 
    for (i = 0; i < selectedObjs.length; i++) { 
     if (event.target == selectedObjs[i]) { 
      alreadySelected = true; 
     } 
    } 

    if (!alreadySelected) { 
     changeSelectedObjectColorOpacity(event.target); 
    } 
}); 

canvas.on('mouse:out', function (event) { 
    var alreadySelected = false; 
    for (i = 0; i < selectedObjs.length; i++) { 
     if (event.target == selectedObjs[i]) { 
      alreadySelected = true; 
     } 
    } 
    if (!alreadySelected) { 
     revertObjectColorOpacity(event.target); 
    } 
    mouseIn = null; 
}); 

canvas.on('selection:cleared', function (event) { 
    console.log('clear'); 
    selectedObjs = []; 
    revertObjectColorOpacity(event.target); 
}); 

/*_________Change Color function_____________*/ 

var selected_fill_color = 'grey'; 
var selected_object_opacity = 0.5; 

function changeSelectedObjectColorOpacity(object) { 
    if (object == null) { return; } 
    original_fill_color = object.fill; 
    original_opacity = object.opacity; 
    object.set('fill', selected_fill_color); 
    object.set('opacity', selected_object_opacity); 
    canvas.renderAll(); 
} 

function revertObjectColorOpacity(object) { 
    if (object == null) { return; } 
    object.set('fill', original_fill_color); 
    object.set('opacity', original_opacity); 
    canvas.renderAll(); 
}