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

Question

我已经使用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
                }

    })  

Answer 1

画布不能那样工作。 画布不是对象容器。 它的工作原理类似于...嗯...一块画布。 当您将图像绘制到画布上时，它不再是图像，而是开始是像素集合。

当您希望某东西从画布上消失时，您要么通过用其他东西对其进行过度上漆来擦除它，要么擦除整个画布并再次绘制除该对象之外的所有内容。

Answer 2

在jCanvas中，使用visible属性禁用层visible性将阻止绘制该层（从而阻止其响应鼠标事件）。

如果要使该图层不可见但仍对事件做出响应，则opacity属性是理想的解决方案。 您应该使用setLayer()方法更新opacity属性的值（将其设置为0将使图像不可见）。 请注意，您将需要drawLayers()调用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();
    }

});