【求助】3.8.7 绘制线条透明渐变会变黑

Creator 3.x
#1

Creator 版本： 3.8.7

目标平台：网页

目前制作了一个鼠标拖尾，颜色是双色渐变加透明度渐变，前端颜色正常，但在末端本应该透明的位置会变为黑色，有大佬们知道是什么原因吗？

当前效果：
bbe539d2-917f-4159-b708-7221e9fb7e2c
期望效果：
Rectangle 240647593 (4)

代码：demo

#2

改下blend

#3

不太行:flushed:

#4

不知道你的实现方案，所以不好给修改建议。

不过只针对这张图片还是可以处理的，就是后期再叠加个着色器，使用图层混合属性中的“ligthen”效果（就是把前景色和背景色像素值直接相加），不过你还需要按权重处理，即拖尾越头部的部分，前景色（也就是这个拖尾）叠加的权重的就越高（例如最头部位置前景色权重100%，背景色权重0%），越尾部则前景色叠加权重越低。

#5

这种变黑一般都是blend出了问题，看下是否有预乘之类的选择

#6

尾部你设置了透明度，多个透明颜色叠加依旧会显示出来，黑色的原因是你代码计算出来的QQ_1764831846696 ，越接近尾部，a越小，alphaFactor越小，颜色越黑。透明的黑色叠加就是黑色，建议去掉这段代码

#7

我有上传demo，不是图片来的，是画了很多个半圆得在一起，我有考虑过叠加着色器，但没试成功 :weary:

#8

我调了 Graphics默认的blend，但只会变纯黑

image
image710×174 10.9 KB

#9

不加的话透明度就达不到我需要的情况了，目前如果叠在黑色背景上看的话其实是能达到期望效果的

#10

你这里改的是颜色，也不是透明度呀

#11

我想的是渐变过渡叠加透明效果，不就是该a值么 \挠头

#12

QQ_1764839862847
你这里改的是agb，是颜色呀，你透明度变小，颜色就变黑，为什么要变黑呢

#13

image
去掉这个修改颜色，不是你要的效果吗

#14

要在这个基础上再加个透明度渐变才是，所以我想叠加个着色器，但没成功，你看尾端是没透明的。

image
image765×105 9.77 KB

#15

QQ_1764901175262
QQ_17649011752621006×287 39 KB

你已经透明了，是因为你的图形是有重叠部分的，透明的绿色相加，透明度是叠加的，所以才是这个样子，除非你不要用Graphics，用一张图加shader去实现

#16

下载你demo看了一下，这里重复了，设置了.a 就不需要将rgb乘以.a了。 scene.ts的 262行到266行注释掉就行了。

#17

// 使用预乘alpha避免重叠时透明度叠加

    // const alphaFactor = currentColor.a / 255;    

    // currentColor.r = Math.floor(currentColor.r * alphaFactor);

    // currentColor.g = Math.floor(currentColor.g * alphaFactor);

    // currentColor.b = Math.floor(currentColor.b * alphaFactor);
#18

blend里面指定了src_alpha就说明不支持预乘，使用的输入是alpha