選択/選択解除後のオブジェクトの色を変更し、mouseOver/mouseOut

Question

2つのケースでオブジェクトの色を変更しようとしています： マウスの後：イベントの後と選択の後。

マウス：イベントまたは選択解除が行われている場合、色は元の色に変更されます。

これは、色を変更するためのものと、元の色に戻すものの2つの機能を書いています。これは、マウスで動作します：outとmouse：細かいですが、オブジェクトが選択されると、作業。この例ではhttp://jsfiddle.net/98cuf9b7/25/

マイコード：ここで

はjsfiddle上の簡単な例である

/*_____________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(); 
} 

は、2つの機能でこれを修正するが方法ですか私は別の関数を記述する必要がありますmouserOver/MouseOutとSelect/Deselectの他の変数は？

Answer 1

ここにはいくつかのことがあると思います。まず、オブジェクト上でマウスを動かすと、changeSelectedObjectColorOpacity（）が呼び出されます。しかし、オブジェクトをクリックして選択すると、関数は再び呼び出され、その色/不透明度に関する情報は消去されます。

第2に、object：selectedイベントは、複数の選択を行った場合、単一のオブジェクトまたはオブジェクトのグループのいずれかを返すことができるため、それをチェックする必要があります。

現在選択されているオブジェクトと、マウスが現在オブジェクト内にあるかどうかを確認する必要があります。

以下のコードは、開始：（fiddle 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(); 
}