如何将内部阴影添加到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对象？

回答

相关问题