我想要一個不透明物體的時候：在在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否則不透明度應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有鼠標：懸停，鼠標：出，對象：移動信息：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); 
});