SVG Displacement-Map-Filter

Question

Ich habe versucht, Fisheye-artige Filter in meinem SVG und fand diese codepen umzusetzen: http://codepen.io/johanberonius/pen/RopjYW

Es funktioniert perfekt in Ordnung, außer ich diesen Effekt wollen etwas sein, „härter“, aber ich couldn‘ t Verschiebungskarte ändern, da sie in js generiert wurde.

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); 
    }); 

Formel ist viel zu fortgeschritten für mich zu hacken. Also habe ich mich gefragt, ob es irgendeinen Weg gibt, wie ich diese Arten von Karten erstellen kann oder vielleicht kann mir jemand mit einer Formel helfen.

Answer 1

Die Verschiebungskarte könnte, zumindest in etwa äquivalent, selbst als SVG-Filter konstruiert werden.

Sie würden also denken, dass Sie in der Lage sein könnten, die Zeichnung der Verschiebungskarte und ihre Anwendung mit dem Bild in einer SVG-Datei zu kombinieren. Es stellt sich heraus, dass Sie nicht können, da Browser enable-background nicht implementieren.

Aber, verteilt auf zwei Dateien, funktioniert es. Zunächst wird die Verschiebung der Karte:

<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> 

Und zweitens die Anwendung auf dem Bild:

<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> 

produzierte ich dies mit dem Inkscape Filter-Editor, der zur Manipulation der Filterkomponenten eine faire grafische Oberfläche gibt. Sie sollten wahrscheinlich etwas mehr experimentieren. Zahlen mit wahrscheinlich zu spielen, um sind:

• feGaussianBlur Verwischradius - die Breite der farbigen Rand, wäre es mein erster Kandidat für das, was Sie nennen „Schärfe“
• feMorphology Radius erodieren sollte wahrscheinlich die Hälfte immer die Wert des Unschärferadius
• feOffset dx/dy die roten und grünen Komponenten relativ zueinander
• feColorMatrix Diejenigen Zahl verdrängen, die nicht Null sind variated werden könnte. Schauen Sie im Filtereditor nach einer Erklärung.