Question

我试图在2种情况下改变对象的颜色：在鼠标之后：在事件之后和选择之后。

如果鼠标：out事件或取消选择发生，颜色应该重新变为原始颜色。

为此，我编写了两个函数：一个用于更改颜色，另一个用于将其更改回原始颜色，使用鼠标：out和mouse：over fine，但是当选择一个对象时，rechange将不起作用

这是一个关于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();
}

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

1 个答案: