如何將內部陰影添加到Raphael.js對象？

我發現了一些基於模糊或發光的陰影插件，還有筆畫不透明度，但這只是模擬，不能用於內部陰影的情況。如何將內部陰影添加到Raphael.js對象？

另外SVG規範中沒有簡單的過濾器，所以你不能簡單地利用它。

來源

2013-01-21 Karol

這是簡單的廣告你的插件？請更改問題和答案以匹配網站的格式（例如詳細說明您嘗試解決問題的方式）。 –

@EliranMalka你是什麼意思的廣告？那麼用你自己的代碼每個答案都是廣告你的代碼？我寧願說我想與SO用戶分享我的解決方案，就像他們對解決方案所做的一樣。這就是爲什麼SO非常有幫助！ – Karol

我寫我自己在此基礎上兩個鏈接插件：

https://github.com/dahoo/raphael.dropshadow.js

http://svgquickref.com/properties/filter/inner-shadow/index.html

HTML代碼（使用）：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <meta charset="utf-8"> 
     <title>Raphael Test</title> 

     <script type="text/javascript" src="js/libs/jquery.js"></script> 
     <script type="text/javascript" src="js/libs/raphael.js"></script> 
     <script type="text/javascript" src="js/libs/raphael.innershadow.js"></script> 
    </head> 
    <body> 
     <div id="raphael"></div> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       var raphael, path, pattern; 
       raphael = Raphael(document.getElementById('raphael'), 500, 500); 
       path = raphael.circle(200, 200, 180); 
       path.attr('fill', 'red'); 
       path.innerShadow(50, 0, 0, "green", 0.5); 
      }); 
     </script> 
    </body> 
</html>

插件代碼：

(function() { 
    if(Raphael.vml) { 
     Raphael.el.innerShadow = function (size, offsetX, offsetY, color, opacity, filter_id, input) { 
      // not supporting VML yet 
      return this; // maintain chainability 
     } 
    } else { 
     var $ = function(el, attr) { 
      if(attr) { 
       for(var key in attr) 
       if(attr.hasOwnProperty(key)) { 
        el.setAttribute(key, attr[key]); 
       } 
      } else { 
       return document.createElementNS("http://www.w3.org/2000/svg", el); 
      } 
     }; 
     Raphael.el.innerShadow = function(size, offsetX, offsetY, color, opacity, filter_id, input) { 

      opacity = opacity || 1; 
      filter_id = filter_id || "innershadow"; 
      input = input || "SourceGraphic"; 

      if(size != "none") { 
       var fltr = $("filter"), 
        offset = $("feOffset"), // offset 
        blur = $("feGaussianBlur"), // shadow bluer 
        composite1 = $("feComposite"), // invert drop shadow to create inner shadow 
        flood = $("feFlood"), // color & opacity 
        composite2 = $("feComposite"), // clip color inside shadow 
        composite3 = $("feComposite") // put shadow over original object 

       fltr.id = filter_id; 

       $(fltr, { 
         "height" : "150%", 
         "width" : "150%" 
       }); 

       $(offset, { 
        dx: offsetX, 
        dy: offsetY 
       }); 

       $(blur, { 
        stdDeviation: +size, 
        result: "offset-blur" 
       }); 

       $(composite1, { 
        operator: "out", 
        "in": "SourceGraphic", 
        in2: "offset-blur", 
        result: "inverse" 
       }); 

       $(flood, { 
        "flood-color": color, 
        "flood-opacity": opacity, 
        result: "color" 
       }); 

       $(composite2, { 
        operator: "in", 
        "in": "color", 
        in2: "inverse", 
        result: "shadow" 
       }); 

       $(composite3, { 
        operator: "over", 
        "in": "shadow", 
        in2: input 
       }); 

       fltr.appendChild(offset); 
       fltr.appendChild(blur); 
       fltr.appendChild(composite1); 
       fltr.appendChild(flood); 
       fltr.appendChild(composite2); 
       fltr.appendChild(composite3); 

       this.paper.defs.appendChild(fltr); 
       this._blur = fltr; 

       $(this.node, { 
        "filter" : "url(#" + filter_id + ")" 
       }); 

      } else { 
       if(this._blur) { 
        this._blur.parentNode.removeChild(this._blur); 
        delete this._blur; 
       } 
       this.node.removeAttribute("filter"); 
      } 
      return this; // maintain chainability 
     }; 
    } 

    Raphael.st.innerShadow = function(size, offsetX, offsetY, color, opacity, filter_id, input) { 
     return this.forEach(function(el) { 
      el.innerShadow(size, offsetX, offsetY, color, opacity, filter_id, input); 
     }); 
    }; 
})();

來源

2013-01-21 01:12:20 Karol

這只是簡單地給你的插件做廣告？請更改問題和答案以匹配網站的格式（例如版權標題是多餘的）。 –

我刪除了版權 - 不知道這是一個問題。 – Karol

謝謝你，我指的是整個標題塊（這些內容是多餘的，因爲它對描述的問題沒有貢獻）。 –

如何將內部陰影添加到Raphael.js對象？

回答

相關問題