禁用黑色像素上的绘图

Question

我有一个fabric.js画布，其中包含这样的图像对象：

我可以得出几种颜色/画笔的形象，但我不想画了黑线/像素。 这是因为它描述了我图像上的墙壁。

因此，例如，如果我在画布上绘制一些红色，它应该看起来像这样：

如您所见，黑线应持续存在。 但是最大的问题是：如何在fabric.js中做到这一点？

我可以想到两种解决方案：

1. 在fabric.js代码中找到绘制的位置。 添加一个检查if（this_pixel_is_black）{不做其他操作}否则{绘制像素。.}
2. 制作一个遍历源图像每个像素的（PHP）脚本。 如果是黑色像素，则将其绘制在新的透明画布上。 保存该图像，并将其添加到另一个fabric.js图像之上。 然后，当用户绘制时，应在顶部透明画布的下方绘制它。

您有更好的主意吗？ 而且我不知道如何实施我的两个建议。

Answer 1

我自己使用OP中的建议2解决了问题。

通过fabric.js源看去，注意到方法_finalizeAndAddPath具有拉伸后mouseUp事件触发。 该方法将触发事件path:created 。

在制作fabric.js画布时，我首先创建“背景”图像，然后（通过PHP脚本）创建仅填充黑色像素的透明图像。

抛出path:created事件时，我将绘制的路径向后移动，因此透明层仍在最上面。 实际上它真的很棒！

您可以在这里看到有效的JSFiddle： http : //jsfiddle.net/2u4h4/

如果有人对PHP脚本感兴趣，该脚本会将图像转换为仅具有黑色像素的透明png，则在这里：

$img = imagecreatefrompng('source.png');
$width = imagesx($img);
$height = imagesy($img);

//Placeholder to transparent image
$img_transp = imagecreatetruecolor($width, $height);

//Make image transparent (on white)
$index = imagecolorexact($img_transp, 255, 255, 255); 
imagecolortransparent($img_transp, $index); 
imagefill($img_transp, 0, 0, $index);

$black = imagecolorallocate($img_transp, 0, 0, 0);

//Loop every pixel
for($x = 0;$x < $width;$x++){
    for($y = 0;$y < $height;$y++){
        if(imagecolorat($img, $x, $y) == 0){ //Is the pixel black?
            imagesetpixel($img_transp, $x, $y, $black); //Draw the black pixel
        }
    }
}

header('Content-Type: image/png');
imagepng($img_transp); //Show the image to the user