在JCanvas中单击时将元素设置为可见

时间:2014-08-02 13:13:51

标签: canvas html5-canvas jcanvas

我使用drawImage()在画布上绘制了一个法师,并将其可见性设置为false,我希望它在点击和鼠标悬停时可见。我该怎么办 ?感谢

这是我到目前为止所写的内容,但这当然不起作用

$('#scene').drawImage({

            source:'files/gp/js/bigview/avg/aileav.png',
            name:'aileavg',
            x:198,
            y:76,
            width:110,
            height:106,
            fromCenter: false,
            layer: true,
            visible:false,              
            click:function(layer){
                visible:true
                }

    })  

2 个答案:

答案 0 :(得分:0)

Canvas无法正常工作。画布不是对象容器。它就像......嗯......画布。当您将图像绘制到画布时,它将停止成为图像并开始成为像素集合。

当你想要从画布中消失某些东西时,你要么必须通过用其他东西覆盖它来擦除它,要么通过擦除整个画布并再次绘制除了该对象之外的所有内容。

答案 1 :(得分:0)

在jCanvas中,使用visible属性禁用图层可见性将阻止绘制该图层(从而阻止它响应鼠标事件)。

如果您希望图层呈现为不可见但仍然响应事件,则opacity属性是理想的解决方案。您应该使用setLayer()方法更新opacity属性的值(将其设置为0将使图像不可见)。请注意,之后您需要调用drawLayers()方法在画布上呈现此更改。

$('#scene').drawImage({

    source: 'files/gp/js/bigview/avg/aileav.png',
    name: 'aileavg',
    x: 198,
    y: 76,
    width: 110,
    height: 106,
    fromCenter: false,
    layer: true,
    opacity: 0,          
    click: function (layer) {
        $(this).setLayer(layer, {
            opacity: 1
        })
        .drawLayers();
    }

});