禁用在黑色像素上绘图答案

【问题标题】：Disable drawing on black pixels禁用在黑色像素上绘图
【发布时间】：2014-07-03 16:28:24
【问题描述】：

我有一个包含如下图像对象的 fabric.js 画布：

我可以用几种颜色/画笔在该图像上绘图，但我不想在黑色线条/像素上绘图。这是因为它描述了我图像上的墙壁。

所以如果我例如在画布上画一些红色，它应该是这样的：

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

我能想到两种解决方案：

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

你有更好的想法吗？而且我不知道如何实施我的两个建议。

【问题讨论】：

只是一般的想法 - 使用 3 层（画布）怎么样：去除黑色的背景、绘图层和只有黑色背景的顶层。这样在第二层画出你想要的任何东西，黑色总是在上面。
@ViliusL 这也是我建议为“解决方案 2”的解决方案。最终我实施的解决方案。效果很好！有关更多信息，请参阅我的以下答案。

标签： javascript fabricjs

【解决方案1】：

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

查看fabric.js 源代码并注意到在绘制后在mouseUp 上触发的方法_finalizeAndAddPath。该方法触发一个事件path:created。

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

当path:created 事件被抛出时，我将绘制的路径向后移动，所以透明层仍然在顶部。它实际上真的非常棒！

你可以在这里看到一个工作的 JSFiddle：http://jsfiddle.net/2u4h4/

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

$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

【讨论】：