Question

我正在使用Fabric.js创建一组两个彼此相邻的矩形。当我将鼠标移到它上面时，我希望左边的一个改变它的颜色。因此，我检查鼠标光标的位置是否在矩形的边界内。这一点很好，直到我扩展组... 我做了一些测试，发现组成员的属性没有改变。因此，当矩形变大时，它们仍然显示其旧尺寸。这是我的代码：

farbicCanvas = new fabric.Canvas('c');

farbicCanvas.on('object:scaling', function(e)
{
   //Show the sizes
   console.log("group width: " + e.target.getWidth());
   console.log("rect1 width: " + e.target.item(0).getWidth());
   console.log("rect2 width: " + e.target.item(1).getWidth());
});

farbicCanvas.on('mouse:move', function(e)
{
    if(e.target !== null)
    {
        point = new getMouseCoords(farbicCanvas, event);

        //Check if cursor is within the boundary of rect2
        if(point.posX >= e.target.item(1).getLeft() + e.target.getLeft() + e.target.getWidth()/2 
        && point.posX <= e.target.item(1).getLeft() + e.target.getLeft() + e.target.getWidth()/2 + e.target.item(1).getWidth()
        && point.posY >= e.target.getTop() 
        && point.posY <= e.target.getTop() + e.target.item(1).getHeight())
        {
            e.target.item(1).set({ fill: 'rgb(0,0,255)' });
            farbicCanvas.renderAll();
        } 
    else
    {
      farbicCanvas.getObjects()[0].item(1).set({ fill: 'rgb(0,255,0)' });
      farbicCanvas.renderAll(); 
    }
  }
  else 
  {
    farbicCanvas.getObjects()[0].item(1).set({ fill: 'rgb(0,255,0)' });
    farbicCanvas.renderAll();
  }
});

var rect1 = new fabric.Rect(
{
  left: 100,
  top: 100,
  width: 100,
  height: 75,
  fill: 'rgb(255,0,0)',
  opacity: 0.5
});

var rect2 = new fabric.Rect(
{
  left: rect1.getLeft() + rect1.getWidth(),
  top: rect1.getTop(),
  width: 100,
  height: 75,
  fill: 'rgb(0,255,0)',
  opacity: 0.5
});

group = new fabric.Group([rect1, rect2]);
farbicCanvas.add(group);

function getMouseCoords(canvas, event)
{
  var pointer = canvas.getPointer(event.e);
  this.posX = pointer.x;
  this.posY = pointer.y;
}

我也做了一个小提琴：https://jsfiddle.net/werschon/0uduqfpe/3/ 如果我将组放大，我的“鼠标检测”将不再起作用，因为left，top或width等属性不会更新。我需要做什么来更新属性？或者有另一种检测鼠标光标是否在矩形上方的方法吗？

感谢。

Answer 1

我找到了一个解决方案（感谢John Morgan）：我必须自己计算小组成员的属性。使用getScaleX()和getScaleY()，我可以获得该组的比例因子。然后我需要将组成员的属性与适当的比例因子相乘。结果，我得到了组成员的新值。在我的示例中，我只需要getScaleX()来计算rect2的宽度，所以它看起来像这样：e.target.item(1).getWidth() * e.target.getScaleX()。这是新代码：

farbicCanvas = new fabric.Canvas('c');

farbicCanvas.on('object:scaling', function(e)
{
    console.log("group width: " + e.target.getWidth());
    console.log("rect1 width: " + e.target.item(0).getWidth() * e.target.getScaleX());
    console.log("rect2 width: " + e.target.item(1).getWidth() * e.target.getScaleX());
});

farbicCanvas.on('mouse:move', function(e)
{
    if(e.target !== null)
    {
        point = new getMouseCoords(farbicCanvas, event);

        if(point.posX >= e.target.getLeft() + e.target.getWidth() - e.target.item(1).getWidth() * e.target.getScaleX() 
        && point.posX <= e.target.getLeft() + e.target.getWidth()
        && point.posY >= e.target.getTop() 
        && point.posY <= e.target.getTop() + e.target.getHeight())
        {
            e.target.item(1).set({ fill: 'rgb(0,0,255)' });
            farbicCanvas.renderAll();
        } 
        else
        {
            e.target.item(1).set({ fill: 'rgb(0,255,0)' });
            farbicCanvas.renderAll(); 
        }
    }
    else 
    {
        farbicCanvas.getObjects()[0].item(1).set({ fill: 'rgb(0,255,0)' });
        farbicCanvas.renderAll();
    }
});

farbicCanvas.on('mouse:out', function(e)
{
    farbicCanvas.getObjects()[0].item(1).set({ fill: 'rgb(0,255,0)' });
    farbicCanvas.renderAll();
});

var rect1 = new fabric.Rect(
{
    left: 100,
    top: 100,
    width: 100,
    height: 75,
    fill: 'rgb(255,0,0)',
    opacity: 0.5
});

var rect2 = new fabric.Rect(
{
    left: rect1.getLeft() + rect1.getWidth(),
    top: rect1.getTop(),
    width: 100,
    height: 75,
    fill: 'rgb(0,255,0)',
    opacity: 0.5
});

group = new fabric.Group([rect1, rect2]);
farbicCanvas.add(group);

function getMouseCoords(canvas, event)
{
    var pointer = canvas.getPointer(event.e);
    this.posX = pointer.x;
    this.posY = pointer.y;
}

我还创建了一个new Fiddle。所以现在我的鼠标检测工作甚至在缩放

之后

Fabric.js：缩放后不更新的组成员的属性

1 个答案: