javascript - SVG位移图滤波器

我试图在我的SVG中实现鱼眼式过滤器，并找到以下代码笔：
 http://codepen.io/johanberonius/pen/RopjYW

它工作得很好，除了我希望此效果稍微“更难”，但由于它是在js中生成的，因此我无法更改位移图。

var canvas = document.getElementById('canvas'),
        barrel = document.getElementById('filter-image'),
        width = canvas.width,
        height = canvas.height,
        ctx = canvas.getContext('2d');

    for (var y = 0; y < height; y++) {
        for (var x = 0; x < width; x++) {
            var dx = x - 128,
                dy = y - 128,
                l = Math.sqrt(dx * dx + dy * dy),
                a = l < 128 ? Math.asin(l/128) : 0,
                z = l < 128 ? 255 - Math.cos(a) * 255 : 0,
                r = l < 128 ? 128 + (dx / 128) * (z / 255) * 128 : 0,
                g = l < 128 ? 128 + (dy / 128) * (z / 255) * 128 : 0,
                o = l >= 124 ? Math.max(0, 1 - (l-124)/4) : 1;

            ctx.fillStyle = 'rgba('+Math.floor(r)+','+Math.floor(g)+',0,'+o+')';
            ctx.fillRect(x,y,1,1);
        }
    }

    barrel.setAttribute('xlink:href', canvas.toDataURL());

    var tx = 0,
        ty = 0;
    requestAnimationFrame(function updateAnimationFrame() {
        tx += 0.027;
        ty += 0.031;
        barrel.setAttribute('x', 128 + Math.sin(tx) * 120);
        barrel.setAttribute('y', 128 + Math.cos(ty) * 120);
        requestAnimationFrame(updateAnimationFrame);
    });

公式对我来说太先进了。
所以我想知道有什么方法可以生成这些类型的地图，或者有人可以通过公式帮助我。

最佳答案

位移图至少可以等效地构造为SVG滤波器本身。

因此，您可能会认为可以在一个SVG文件中组合位移图的绘制及其在图像上的应用。事实证明您不能，因为浏览器未实现enable-background。

但是，它分布在两个文件中，可以工作。一，位移图：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.1" height="300" width="300">
  <defs>
    <filter id="barrel" x="-30%" y="-30%" width="160%" height="160%"
            color-interpolation-filters="sRGB">
      <feGaussianBlur result="result1" stdDeviation="10" />
      <feMorphology operator="erode" radius="5" result="result5"  />
      <feColorMatrix result="result3" type="matrix"
           values="0 0 0 -0.3 0.8 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 " />
      <feOffset result="result4" dy="-5" dx="5" />
      <feColorMatrix result="result2" in="result5" type="matrix"
           values="0 0 0 0 0 0 0 0 -0.3 0.8 0 0 0 0 0 0 0 0 0 1 " />
      <feOffset dy="5" dx="-5" />
      <feComposite result="result6" k3="1" k2="1" operator="arithmetic" in2="result4" />
    </filter>
    <clipPath id="cp" clipPathUnits="userSpaceOnUse">
      <circle r="100" cx="150" cy="150" />
    </clipPath>
  </defs>
  <circle clip-path="url(#cp)" filter="url(#barrel)"
          cy="150" cx="150" r="100" />
</svg>

其次，图像的应用程序：

<svg width="512" height="512" viewBox="0 0 512 512"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">

  <defs>
    <filter id="barrel">
      <feImage id="filter-image" xlink:href="circle.svg" result="barrel"
               x="64" y="64" width="256" height="256" />
      <feDisplacementMap in2="barrel" in="SourceGraphic"
               xChannelSelector="R" yChannelSelector="G" scale="64" />
      <feComposite operator="in" in2="barrel"/>
    </filter>
  </defs>

  <image xlink:href="https://i.imgsafe.org/3353aef52f.jpg"
         x="0" y="0" height="512" width="512"/>
  <image xlink:href="https://i.imgsafe.org/3353aef52f.jpg"
         x="-16" y="-16" height="512" width="512" filter="url(#barrel)"/>
</svg>

我是使用Inkscape过滤器编辑器制作的，该编辑器提供了用于操纵过滤器组件的公平的界面。您可能应该尝试更多。可玩的数字可能是：


feGaussianBlur模糊半径-彩色边框的宽度，这将是我所说的“清晰度”的第一个候选对象
feMorphology腐蚀半径可能应始终为模糊半径的一半
feOffset dx / dy相对于彼此置换红色和绿色分量
feColorMatrix那些不为零的数字可以变化。在过滤器编辑器中查找说明。

关于javascript - SVG位移图滤波器，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43943710/