如果用户在画布的透明区域中绘制，如何检测透明区域单击或？答案

【问题标题】：How to detect transparent area click OR if user draw in transparent area in canvas?如果用户在画布的透明区域中绘制，如何检测透明区域单击或？
【发布时间】：2020-03-07 03:30:54
【问题描述】：

我正在使用 drawImage 在画布上绘制图像。这是一个被透明像素包围的PNG，如下所示：

如何在画布上该图像的透明部分检测绘图移动路径？我想检测用户是否在透明部分中绘制。

我正在尝试这个tutorial，我按照tutorial 中的说明做了。

var ctx = canvas.getContext('2d'),
    img = new Image;

img.onload = draw;
img.src = "http://i.stack.imgur.com/UFBxY.png";

function draw() {
  // draw original image in normal mode
  ctx.drawImage(img, 10, 10);
}

&lt;canvas id=canvas width=500 height=500&gt;&lt;/canvas&gt;

在Github查看完整代码

查看现场演示IonCanvas

【问题讨论】：

如果你能证明你到目前为止所做的尝试可能会有所帮助。
@IronAces 我只是在画布上显示上面的图像。现在我想检测用户是否在透明区域上点击或绘图。
您已经在问题中提到了这一点，但是您尝试解决什么问题？我没有看到任何证据。
查看我编辑的问题，我只在 ionic 应用程序中执行此操作。我想要在画布中定位透明区域。
@IronAces 我添加了代码链接和现场演示，链接有问题。

标签： javascript image cordova ionic-framework html5-canvas

【解决方案1】：

要确定一个像素是否透明，使用ctx.getImageData 获取像素并查看 alpha 值。

示例

// assumes ctx is defined
// returns true if pixel is fully transparent
function isTransparent(x, y) { // x, y coordinate of pixel
    return ctx.getImageData(x, y, 1, 1).data[3] === 0; // 4th byte is alpha
}

【讨论】：

图片和透明区域都是假的，请检查我编辑了问题并添加了现场演示的链接。
是的，它正在工作，但我想检查图像内部。前任。如果用户点击这个人，它会是假的，但如果用户点击图像的另一侧，它就会成真。