为什么统一的灰色不是中性的位移贴图？

我一直在试图产生一个特定的feDisplacementMap并失败悲惨。我相信这是因为我对这个机制有一个基本的误解。的SVG 1.1规范说：为什么统一的灰色不是中性的位移贴图？

该过滤器原语使用的像素值从“IN2” 图像在空间上从“在”置换图像。这是要执行的变换：

P'（x，y）< -P（x + scale *（XC（x，y）-5），y + scale *（YC（x，y ） - .5））其中P（x，y）是输入图像，'in'，P'（x，y）是目的地。 XC（x，y）和YC（x，y）是由xChannelSelector和yChannelSelector指定的通道的组成值。例如，要使用'in2'的R分量来控制x中的位移和Image2的G分量以控制y中的位移，请将xChannelSelector设置为“R” ，将yChannelSelector设置为“G”。

通过我的阅读，这意味着一个中性的灰色图像应该导致没有净像素移动。也就是说，在scale = 50的滤镜中，100,100处的像素应该从（100 + 50 *（0.5 - 0.5），100 + 50 *（0.5-0.5））= 100,100获得新值。但是，当我尝试使用灰度时，它将像素向上映射到源图像的左侧。

<svg width="800px" height="600px" > 
 
    
 
    <defs> 
 
    <g id="displacerect"> 
 
    <rect x="50" y="50" width="300" height="300" fill="rgb(127, 127, 127)"/> 
 
    <rect x="90" y="90" width="50" height="50" fill="red"> 
 
     </rect> 
 
    </g> 
 
    
 
    
 
     <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> 
 
     <stop offset="0%" stop-color="rgb(255,255,0)" stop-opacity="1" /> 
 
     <stop offset="100%"stop-color="rgb(255,0,0)" stop-opacity="1" /> 
 
    </linearGradient> 
 
    
 
    <filter id="displaceME" x="0%" y="0%" width="100%" height="100%"> 
 
    <feImage xlink:href="#displacerect" result="displaceImage"/> 
 
    <feDisplacementMap scale="125" xChannelSelector="R" yChannelSelector="G" in="SourceGraphic" in2="displaceImage"/> 
 

 
    
 
    </filter> 
 
    
 
    </defs> 
 
    
 
    <g filter="url(#displaceME)"> 
 
    <rect x="50" y="50" width="300" height="300" fill="url(#grad1)"/> 
 
    </g> 
 
    
 
    <use xlink:href="#displacerect" x="400"/> 
 
    
 
    
 
    
 
</svg>

另据透露：实际中性置换贴图应该是这样的形象：

来源

2016-04-24 Michael Mullany

你有[mcve]吗？ –

似乎浏览器不遵循规范，只是在计算位移时复制Photoshop的行为。

来源

2016-05-04 14:58:56

我可以看到你的榜样至少一个错误。

在你的<feDisplacementMap>你正在引用你的位移图像（in2）与in2="displacerect"。但是没有结果值的过滤器原语。我相信你的意思是in2="displaceImage"？

来源

2016-04-25 02:07:28

感谢您的收获，修正了上述错误 - 但Chrome无视这一参考。总体问题仍然是一样的 –

我有类似的问题。我的源图像和我的置换图图像大小相同，因此上面显示的“中性”位移图像不可能是正确的。必须是红色通道和绿色通道在整个图像中具有相同的恒定值以进行零点漂移。我不明白为什么我不得不像你所期望的那样使用188像素而不是128像素像素。在http://www.tapper-ware.net/blog/?p=39该博客提供了以下提示，解决了这个问题对我来说：

color-interpolation-filters="sRGB"

笔者的SVG代码片段是：

<svg:filter 
id="myFilterId" 
color-interpolation-filters="sRGB" 
filterUnits="userSpaceOnUse" 
x="0" y="0" width="768" height="512"> 
</svg:filter>

指定色彩空间后要sRGB的这一切都开始工作，我预期。

来源

2017-03-11 07:28:49

为什么统一的灰色不是中性的位移贴图？

回答

相关问题