选择/取消选择和 mouseOver/mouseOut 后更改对象的颜色

Question

我试图在 2 种情况下更改对象的颜色： 在 mouse:over 事件和选择之后。

如果发生 mouse:out 事件或取消选择，颜色应重新变为原来的颜色。

为此，我编写了两个函数：一个用于更改颜色，一个用于将其更改回原来的颜色，它适用于 mouse:out 和 mouse:over 很好，但是当一个对象被选中时，重新更改将不起作用.

这是一个关于 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()。但是，如果您随后单击对象将其选中，则该函数会再次被调用，从而删除有关其先前颜色/不透明度的信息。

其次，如果您进行了多项选择，object:selected 事件可以返回单个对象或一组对象 - 因此您需要检查这一点。

我认为您需要跟踪当前选定的对象以及鼠标当前是否在对象内。

下面的代码应该是一个开始：（小提琴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();
}