如何检测画布中的非透明区域?并在非透明区域跟踪绘制线

我正在使用ionic 4制作绘图应用程序,在该应用程序中,我使用drawImage在画布中添加了图像。

此处的图片示例:

如何检测画布中的非透明区域?并在非透明区域跟踪绘制线

在此图像中,如果用户(孩子)画一条线来学习数字。例如如果用户当时在1号图像上绘制1号,我想以百分比显示准确性。一旦达到100%,就表示是正确的。

isTransparent(x,y) { // x,y coordinate of pixel
let alpha = this.ctx.getImageData(x,y,1,1).data[3]; // 3rd byte is alpha

if (alpha === 0) {
  this.accuracy = 0;
  console.log("Transparent image clicked!");
} else {
  this.accuracy = 100;
  console.log("image clicked!");
}
}

我在GitHub上添加的code samplelive Demo

zjqgd 回答:如何检测画布中的非透明区域?并在非透明区域跟踪绘制线

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/3111508.html

大家都在问