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时使用不透明度，否则不透明度应为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中的画布没有对象：over和object：out。 fabric.js有鼠标：over，mouse：out，object：moving：doc address 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);
});

当object：over在fabric.js中时，我想要一个不透明度

2 个答案: