我想要一个不透明的对象：在fabric.js中

Question

  canvas.on('object:over', function(e) {
    //I want change opacity of object on mouse over on object
  });
  canvas.on('object:out', function(e) {

  });

我希望object:over时不透明度为1，否则不透明度应为0

Answer 1

如果上下文是2d。 使用context.globalAlpha将解决这种情况。

 <script>
    window.onload = function() {
    var canvas=document.getElementById("drawing"); // grabs the canvas element
    var context=canvas.getContext("2d"); // returns the 2d context object

  canvas.on('object:over', function(e) {
    //I want change opacity of object on mouse over on object
    //blue rectangle
    context.fillStyle= "#b0c2f7";
    context.globalAlpha=0; // Half opacity
    context.fillRect(10,10,100,50);
  });

     canvas.on('object:out', function(e) {
    context.fillStyle= "#b0c2f7";
    context.globalAlpha=1; // full opacity
    context.fillRect(10,10,100,50);
  });
    }
    </script>

Answer 2

我正在出口fabric.js。 但是fabric.js中的画布没有object：over和object：out。 fabric.js具有mouse：over，mouse：out，object：moving：doc地址http://fabricjs.com/docs/fabric.Canvas.html

canvas.on('mouse:over', function(e) {
  var targetObj = e.target;
  targetObj.setOpacity(0.5);
});
canvas.on('mouse:out', function(e) {
  var targetObj = e.target;
  targetObj.setOpacity(1);
});