CODEWITHSUNDEEP
javascriptfrontendfabricjs
Sophie D
Sophie D

Reputation: 465

Change color of object after selection/deselection and mouseOver/mouseOut

I'm trying to change the color of an object in 2 cases: after a mouse:over event and after a selection.

If a mouse:out Event or a deselection is happening, the color should rechange to its original color.

For this I wrote two functions: one for changing the color and one for changing it back to its original color, which works with mouse:out and mouse:over fine, but when an object gets selected the rechange won't work.

Here is an simple example on jsfiddle: http://jsfiddle.net/98cuf9b7/25/

My Code at this example: 

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

Is there a way to fix this with two functions or do I have to write a separate function with other variables for mouserOver/MouseOut and Select/Deselect?

Upvotes: 1

Views: 2060

Answers (1)

John M
John M

Reputation: 2600

I think there are a few things going on here. Firstly, if you move the mouse over an object, changeSelectedObjectColorOpacity() gets called. But if you then click on the object to select it, the function gets called again, erasing the information on it's previous color/opacity.

Secondly, the object:selected event can return either a single object, or a group of objects if you've made a multiple selection - so you need to check for that.

I think you will need to keep track of the currently selected object(s) and whether or not the mouse is currently inside an object.

The code below should be a start: (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();
}

Upvotes: 2

Related Questions