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

【问题标题】：Set an element to visible on click in JCanvas将元素设置为在 JCanvas 中单击时可见
【发布时间】：2014-10-10 08:51:34
【问题描述】：

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

    })

【问题讨论】：

标签： canvas html5-canvas jcanvas

【解决方案1】：

Canvas 不是这样工作的。画布不是对象容器。它就像……嗯……画布。当您将图像绘制到画布上时，它不再是图像，而是开始成为像素集合。

当你想让某个东西从画布上消失时，你要么必须通过用其他东西覆盖它来擦除它，要么通过擦除整个画布并重新绘制除该对象之外的所有东西。

【讨论】：

【解决方案2】：

在 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();
    }

});

【讨论】：