SVG変位マップフィルタ

Question

私は私のSVGに魚眼レンズ風のフィルタを実装しようと、このcodepenを発見された： http://codepen.io/johanberonius/pen/RopjYW

私はこの効果はわずか「困難」になりたい除いそれは完全に正常に動作しますが、私は「couldn 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); 
    }); 

フォーミュラが私にハックするにはあまりにも進んでいます。 私はこれらのタイプのマップを生成する方法があるか、誰かが数式で私を助けることができるかどうか疑問に思っていました。

Answer 1

変位マップは、少なくともほぼ同等で、SVGフィルタ自体として構築することができます。

変位マップの図面とそのアプリケーションを1つのSVGファイルで画像に結合できると思うでしょう。ブラウザにはenable-backgroundが実装されていないため、できないことが分かります。

しかし、2つのファイルに分散して動作します。まず、ディスプレイスメントマップ：

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

私は、フィルタコンポーネントを操作するための公正graficalインタフェースを提供しますInkscapeのフィルタエディタでこれを生産。おそらくもう少し実験してください。おそらくあるで遊ぶに番号：

• feGaussianBlurぼかし半径 - 色の境界線の幅、それはあなたが「シャープネス」と呼ぶもののために私の第一候補になり
• feMorphology半径を侵食は、おそらく常に半分でなければなりませんぼかし半径の値
• feOffset DX/dyがゼロではないこれらの数はvariatedことができ、互いに
• feColorMatrixに対して赤と緑の成分を置換します。フィルタエディタで説明を探します。