Изменить цвет объекта после выбора/отмены выделения и mouseOver/mouseOut

Question

Я пытаюсь изменить цвет объекта в 2 случаях: после мыши: через событие и после выбора.

Если мышь: вне события или происходит отмена выбора, цвет должен меняться до его первоначального цвета.

Для этого я написал две функции: один для изменения цвета и один для изменения его первоначального цвета, который работает с мышью: out и mouse: по-хорошему, но когда объект выбирается, замена не будет Работа.

Вот простой пример на 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(); 
}