在 selection/deselection 和 mouseOver/mouseOut 之后更改对象的颜色

Question

我试图在两种情况下更改对象的颜色：在 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()。但是，如果您随后单击该对象以 select 它，该函数将再次调用，删除其先前 color/opacity.

的信息

其次，object:selected 事件可以 return 单个对象或一组对象，如果你已经制作了多个 selection - 所以你需要检查那。

我认为您需要跟踪当前 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();
}

在 selection/deselection 和 mouseOver/mouseOut 之后更改对象的颜色

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

javascript

frontend

fabricjs