透明png文件HTML画布下方的触发元素

问题描述

我想在用户点击图片时触发一些功能，但是png的透明部分可以阻挡另一个元素的某些可见空间。

应用是用 React JS 编写的

    async showIngredientInfo(event,ingredient) {
        event.preventDefault();
        event.persist();
        
        var ctx = await document.createElement("canvas").getContext('2d');

        var x = event.pageX - event.target.offsetLeft;
        var y = event.pageY - event.target.offsetTop;
        var w = ctx.canvas.width = event.target.width;
        var h = ctx.canvas.height = event.target.height;
        
        //Draw image to canvas
        await ctx.drawImage(event.target,w,h);
        var alpha = await ctx.getimageData(x,y,1,1).data[3];
        console.log(alpha);
        if(alpha === 0) {
            console.log("trans\n")
            try {
                event.target.style.pointerEvents='none';
                event.target.style.display=await'none';
            } catch (e) {console.log(e);}
            await ctx.clearRect(0,ctx.canvas.width,ctx.canvas.height);

            document.elementFromPoint(event.clientX,event.clientY).click();
            event.target.style.display='block';
            event.target.style.pointerEvents="auto";
        } else {
            console.log(ingredient)
        };
    };

<section ref={this.container} id="ingredients-container" className="ingredients-container">
    <canvas ref={this.canvasRef}></canvas>
    <img className="board" alt="cutting-board" src="/images/board.svg"></img>
    <img onClick={(e) => this.showIngredientInfo(e,"mui")} alt="mui" className="ins mui"  src="/images/mui.png"></img>
    
    <img onClick={(e) => this.showIngredientInfo(e,"chilli")} alt="chilli" className="ins chilli"  src="/images/chilli.png"></img>
    <img onClick={(e) => this.showIngredientInfo(e,"veggies")} alt="veggies" className="ins veggies"  src="/images/veggies.svg"></img>
    <img onClick={(e) => this.showIngredientInfo(e,"cucumber")} alt="cucumber" className="ins cucumber"  src="/images/cucumber.svg"></img>
    <img onClick={(e) => this.showIngredientInfo(e,"cha")} alt="cha" className="ins cha"  src="/images/cha.svg"></img>

    <img onClick={(e) => this.showIngredientInfo(e,"bm")} alt="banh-mi" className="ins bm"  src="/images/banhmi.svg"></img>
    <img onClick={(e) => this.showIngredientInfo(e,"meat")} alt="meat" className="ins meat"  src="/images/meat.svg"></img>
    <img onClick={(e) => this.showIngredientInfo(e,"gio")} alt="gio" className="ins gio"  src="/images/gio.svg"></img>


    <img onClick={(e) => this.showIngredientInfo(e,"sauce")} alt="sauce" className="ins sauce"  src="/images/sauce.svg"></img>
    <img onClick={(e) => this.showIngredientInfo(e,"mayo")} alt="mayo" className="ins mayo"  src="/images/mayo.svg"></img>
    <img onClick={(e) => this.showIngredientInfo(e,"pate")} alt="pate" className="ins pate"  src="/images/pate.svg"></img>
    <img onClick={(e) => this.showIngredientInfo(e,"ruoc")} alt="ruoc" className="ins ruoc"  src="/images/ruoc.svg"></img>

    <div style={{height:"100vh"}}></div>
</section>



<section ref={this.container} id="ingredients-container" className="ingredients-container">
    <canvas ref={this.canvasRef}></canvas>
    <img className="board" alt="cutting-board" src="/images/board.svg"></img>
    <img onClick={(e) => this.showIngredientInfo(e,"ruoc")} alt="ruoc" className="ins ruoc"  src="/images/ruoc.svg"></img>

    <div style={{height:"100vh"}}></div>
</section>






 async showIngredientInfo(event,event.clientY).click();
            event.target.style.display='block';
            event.target.style.pointerEvents="auto";
        } else {
            console.log(ingredient)
        };
    };
```

```
<section ref={this.container} id="ingredients-container" className="ingredients-container">
    <canvas ref={this.canvasRef}></canvas>
    <img className="board" alt="cutting-board" src="/images/board.svg"></img>
    <img onClick={(e) => this.showIngredientInfo(e,"ruoc")} alt="ruoc" className="ins ruoc"  src="/images/ruoc.svg"></img>

    <div style={{height:"100vh"}}></div>
</section>

<!-- begin snippet: js hide: false console: true babel: false -->

我的问题是，当我点击 png 的某个透明部分时，该功能被触发，但随后将该点读取为透明（它不应该，因为我已将其显示设置为“无”）。请帮忙，非常感谢！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）