gpt4 book ai didi

javascript - 禁用在黑色像素上绘图

转载 作者:行者123 更新时间:2023-11-28 01:10:09 24 4
gpt4 key购买 nike

我有一个 Fabric.js Canvas ,其中包含如下图像对象: enter image description here

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

所以如果我例如在 Canvas 上画一些红色,它应该看起来像这样:

enter image description here

如您所见,黑线应该持续存在。但最大的问题是:如何在 Fabric.js 中做到这一点?

我能想到两种解决方案:

  1. 在 Fabric.js 代码中找到要绘制的位置。添加检查 if(this_pixel_is_black){ 不要执行任何操作 }else{ 绘制像素.. }
  2. 制作一个 (PHP) 脚本来遍历源图像的每个像素。如果它是黑色像素,它将被绘制在新的透明 Canvas 上。保存该图像,并将其添加到另一个 Fabric.js 图像的顶部。然后,当用户绘制时,应该将其绘制在顶部透明 Canvas 的下方。

你还有什么更好的想法吗?而且我不知道如何实现我的两条建议。

最佳答案

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

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

在制作 Fabric.js Canvas 时,我首先创建“背景”图像,然后(通过 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

关于javascript - 禁用在黑色像素上绘图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24547156/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com