javascript - 有什么方法可以选择自由形成的图像吗？

Question

<分区>

Answer 1

我会使用 Fabric.js。但是，如果这不是一个选项，我会创建所有图像，采用 png 格式并与 Canvas 具有相同的宽度和高度。

然后我会在 Canvas 中绘制所有图像。

当鼠标进入 Canvas 时，获取坐标并检查每个图像上的像素，直到找到不透明的像素。当发生这种情况时，使用所选图像重新绘制 Canvas 。

但是，如何从 javascript 检查图像的像素？看来您只能单独在 Canvas 上绘制图像( here 和 here )。但是您的图像将始终相同，因此您可以预先生成该信息:为每个图像创建一个 0(透明像素)和 1 的矩阵，仅此而已，将所有矩阵保存在一个数组中，并在以下情况下使用该信息鼠标进入 Canvas 。

一些伪代码:

paint() {
    for (image in images) {
        if (image.isSelected) {
            canvas.draw( image, opacity=1.0 )
        } else {
            canvas.draw( image, opacity=0.5 )
        }
    }
}

canvas.on("mouseover") {
    unselectAllImages();
    coords = getCoords();
    for (var i=0; i<matrixArray.length; i++) {
        matrix = matrixArray[i];
        if ( matrix[coords.x, coords.y]!=0 ) {
            //you have found a non-transparent pixel in this image
            //that means this is the image going to be selected
            images[i].isSelected = true;
            break;
        }
    }
}

canvas.on("mouseout") {
    unselectAllImages();
}