zcy
/
snap.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix for bug #165 — added opacity option for shadow filters

master
Dmitry Baranovskiy 2014-01-13 13:06:26 +11:00
parent 7a4e7a8632
commit 5b3e509fb6
4 changed files with 141 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
dist/snap.svg-min.js vendored
View File

File diff suppressed because one or more lines are too long

37
dist/snap.svg.js vendored
View File

@ -14,7 +14,7 @@
// See the License for the specific language governing permissions and // See the License for the specific language governing permissions and
// limitations under the License. // limitations under the License.
// //
// build: 2014-01-08 // build: 2014-01-13
// Copyright (c) 2013 Adobe Systems Incorporated. All rights reserved. // Copyright (c) 2013 Adobe Systems Incorporated. All rights reserved.
// //
// Licensed under the Apache License, Version 2.0 (the "License"); // Licensed under the Apache License, Version 2.0 (the "License");
@ -6768,10 +6768,20 @@ Snap.plugin(function (Snap, Element, Paper, glob) {
** **
* Returns an SVG markup string for the shadow filter * Returns an SVG markup string for the shadow filter
** **
- dx (number) horizontal shift of the shadow, in pixels - dx (number) #optional horizontal shift of the shadow, in pixels
- dy (number) vertical shift of the shadow, in pixels - dy (number) #optional vertical shift of the shadow, in pixels
- blur (number) #optional amount of blur - blur (number) #optional amount of blur
- color (string) #optional color of the shadow - color (string) #optional color of the shadow
- opacity (number) #optional `0..1` opacity of the shadow
* or
- dx (number) #optional horizontal shift of the shadow, in pixels
- dy (number) #optional vertical shift of the shadow, in pixels
- color (string) #optional color of the shadow
- opacity (number) #optional `0..1` opacity of the shadow
* which makes blur default to `4`. Or
- dx (number) #optional horizontal shift of the shadow, in pixels
- dy (number) #optional vertical shift of the shadow, in pixels
- opacity (number) #optional `0..1` opacity of the shadow
= (string) filter representation = (string) filter representation
> Usage > Usage
| var f = paper.filter(Snap.filter.shadow(0, 2, 3)), | var f = paper.filter(Snap.filter.shadow(0, 2, 3)),
@ -6779,14 +6789,22 @@ Snap.plugin(function (Snap, Element, Paper, glob) {
| filter: f | filter: f
| }); | });
\*/ \*/
Snap.filter.shadow = function (dx, dy, blur, color) { Snap.filter.shadow = function (dx, dy, blur, color, opacity) {
if (typeof blur == "string") {
color = blur;
opacity = color;
blur = 4;
}
if (typeof color != "string") {
opacity = color;
color = "#000";
}
color = color || "#000"; color = color || "#000";
if (blur == null) { if (blur == null) {
blur = 4; blur = 4;
} }
if (typeof blur == "string") { if (opacity == null) {
color = blur; opacity = 1;
blur = 4;
} }
if (dx == null) { if (dx == null) {
dx = 0; dx = 0;
@ -6796,11 +6814,12 @@ Snap.plugin(function (Snap, Element, Paper, glob) {
dy = dx; dy = dx;
} }
color = Snap.color(color); color = Snap.color(color);
return Snap.format('<feGaussianBlur in="SourceAlpha" stdDeviation="{blur}"/><feOffset dx="{dx}" dy="{dy}" result="offsetblur"/><feFlood flood-color="{color}"/><feComposite in2="offsetblur" operator="in"/><feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge>', { return Snap.format('<feGaussianBlur in="SourceAlpha" stdDeviation="{blur}"/><feOffset dx="{dx}" dy="{dy}" result="offsetblur"/><feFlood flood-color="{color}"/><feComposite in2="offsetblur" operator="in"/><feComponentTransfer><feFuncA type="linear" slope="{opacity}"/></feComponentTransfer><feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge>', {
color: color, color: color,
dx: dx, dx: dx,
dy: dy, dy: dy,
blur: blur blur: blur,
opacity: opacity
}); });
}; };
Snap.filter.shadow.toString = function () { Snap.filter.shadow.toString = function () {

92
doc/reference.html
View File

@ -8745,7 +8745,7 @@ prototypes). This allow you to extend anything you want.
<article id="Snap.filter.shadow"> <article id="Snap.filter.shadow">
<header> <header>
<h3 class="dr-method">Snap.filter.shadow(dx, dy, [blur], [color])<a href="#Snap.filter.shadow" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 125 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#125">&#x27ad;</a></h3> <h3 class="dr-method">Snap.filter.shadow(…)<a href="#Snap.filter.shadow" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 135 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#135">&#x27ad;</a></h3>
</header> </header>
<section> <section>
<div class="extra" id="Snap.filter.shadow-extra"></div> <div class="extra" id="Snap.filter.shadow-extra"></div>
@ -8781,6 +8781,82 @@ prototypes). This allow you to extend anything you want.
<li class="topcoat-list__item"><span class="dr-param">color</span> <li class="topcoat-list__item"><span class="dr-param">color</span>
<span class="dr-type"><em class="dr-type-string">string</em> </span> <span class="dr-type"><em class="dr-type-string">string</em> </span>
<span class="dr-description">color of the shadow</span></li> <span class="dr-description">color of the shadow</span></li>
<li class="topcoat-list__item"><span class="dr-param">opacity</span>
<span class="dr-type"><em class="dr-type-number">number</em> </span>
<span class="dr-description"><code>0..1</code> opacity of the shadow</span></li>
</ol>
</div>
<p>or
</p>
<div class="topcoat-list__container">
<h3 class="topcoat-list__header">Parameters</h3>
<ol class="topcoat-list">
<li class="topcoat-list__item"><span class="dr-param">dx</span>
<span class="dr-type"><em class="dr-type-number">number</em> </span>
<span class="dr-description">horizontal shift of the shadow, in pixels</span></li>
<li class="topcoat-list__item"><span class="dr-param">dy</span>
<span class="dr-type"><em class="dr-type-number">number</em> </span>
<span class="dr-description">vertical shift of the shadow, in pixels</span></li>
<li class="topcoat-list__item"><span class="dr-param">color</span>
<span class="dr-type"><em class="dr-type-string">string</em> </span>
<span class="dr-description">color of the shadow</span></li>
<li class="topcoat-list__item"><span class="dr-param">opacity</span>
<span class="dr-type"><em class="dr-type-number">number</em> </span>
<span class="dr-description"><code>0..1</code> opacity of the shadow</span></li>
</ol>
</div>
<p>which makes blur default to <code>4</code>. Or
</p>
<div class="topcoat-list__container">
<h3 class="topcoat-list__header">Parameters</h3>
<ol class="topcoat-list">
<li class="topcoat-list__item"><span class="dr-param">dx</span>
<span class="dr-type"><em class="dr-type-number">number</em> </span>
<span class="dr-description">horizontal shift of the shadow, in pixels</span></li>
<li class="topcoat-list__item"><span class="dr-param">dy</span>
<span class="dr-type"><em class="dr-type-number">number</em> </span>
<span class="dr-description">vertical shift of the shadow, in pixels</span></li>
<li class="topcoat-list__item"><span class="dr-param">opacity</span>
<span class="dr-type"><em class="dr-type-number">number</em> </span>
<span class="dr-description"><code>0..1</code> opacity of the shadow</span></li>
</ol> </ol>
</div> </div>
@ -8839,7 +8915,7 @@ prototypes). This allow you to extend anything you want.
<article id="Snap.filter.grayscale"> <article id="Snap.filter.grayscale">
<header> <header>
<h3 class="dr-method">Snap.filter.grayscale(amount)<a href="#Snap.filter.grayscale" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 161 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#161">&#x27ad;</a></h3> <h3 class="dr-method">Snap.filter.grayscale(amount)<a href="#Snap.filter.grayscale" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 180 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#180">&#x27ad;</a></h3>
</header> </header>
<section> <section>
<div class="extra" id="Snap.filter.grayscale-extra"></div> <div class="extra" id="Snap.filter.grayscale-extra"></div>
@ -8899,7 +8975,7 @@ prototypes). This allow you to extend anything you want.
<article id="Snap.filter.sepia"> <article id="Snap.filter.sepia">
<header> <header>
<h3 class="dr-method">Snap.filter.sepia(amount)<a href="#Snap.filter.sepia" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 188 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#188">&#x27ad;</a></h3> <h3 class="dr-method">Snap.filter.sepia(amount)<a href="#Snap.filter.sepia" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 207 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#207">&#x27ad;</a></h3>
</header> </header>
<section> <section>
<div class="extra" id="Snap.filter.sepia-extra"></div> <div class="extra" id="Snap.filter.sepia-extra"></div>
@ -8959,7 +9035,7 @@ prototypes). This allow you to extend anything you want.
<article id="Snap.filter.saturate"> <article id="Snap.filter.saturate">
<header> <header>
<h3 class="dr-method">Snap.filter.saturate(amount)<a href="#Snap.filter.saturate" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 216 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#216">&#x27ad;</a></h3> <h3 class="dr-method">Snap.filter.saturate(amount)<a href="#Snap.filter.saturate" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 235 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#235">&#x27ad;</a></h3>
</header> </header>
<section> <section>
<div class="extra" id="Snap.filter.saturate-extra"></div> <div class="extra" id="Snap.filter.saturate-extra"></div>
@ -9019,7 +9095,7 @@ prototypes). This allow you to extend anything you want.
<article id="Snap.filter.hueRotate"> <article id="Snap.filter.hueRotate">
<header> <header>
<h3 class="dr-method">Snap.filter.hueRotate(angle)<a href="#Snap.filter.hueRotate" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 236 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#236">&#x27ad;</a></h3> <h3 class="dr-method">Snap.filter.hueRotate(angle)<a href="#Snap.filter.hueRotate" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 255 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#255">&#x27ad;</a></h3>
</header> </header>
<section> <section>
<div class="extra" id="Snap.filter.hueRotate-extra"></div> <div class="extra" id="Snap.filter.hueRotate-extra"></div>
@ -9079,7 +9155,7 @@ prototypes). This allow you to extend anything you want.
<article id="Snap.filter.invert"> <article id="Snap.filter.invert">
<header> <header>
<h3 class="dr-method">Snap.filter.invert(amount)<a href="#Snap.filter.invert" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 254 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#254">&#x27ad;</a></h3> <h3 class="dr-method">Snap.filter.invert(amount)<a href="#Snap.filter.invert" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 273 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#273">&#x27ad;</a></h3>
</header> </header>
<section> <section>
<div class="extra" id="Snap.filter.invert-extra"></div> <div class="extra" id="Snap.filter.invert-extra"></div>
@ -9139,7 +9215,7 @@ prototypes). This allow you to extend anything you want.
<article id="Snap.filter.brightness"> <article id="Snap.filter.brightness">
<header> <header>
<h3 class="dr-method">Snap.filter.brightness(amount)<a href="#Snap.filter.brightness" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 275 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#275">&#x27ad;</a></h3> <h3 class="dr-method">Snap.filter.brightness(amount)<a href="#Snap.filter.brightness" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 294 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#294">&#x27ad;</a></h3>
</header> </header>
<section> <section>
<div class="extra" id="Snap.filter.brightness-extra"></div> <div class="extra" id="Snap.filter.brightness-extra"></div>
@ -9199,7 +9275,7 @@ prototypes). This allow you to extend anything you want.
<article id="Snap.filter.contrast"> <article id="Snap.filter.contrast">
<header> <header>
<h3 class="dr-method">Snap.filter.contrast(amount)<a href="#Snap.filter.contrast" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 295 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#295">&#x27ad;</a></h3> <h3 class="dr-method">Snap.filter.contrast(amount)<a href="#Snap.filter.contrast" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 314 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#314">&#x27ad;</a></h3>
</header> </header>
<section> <section>
<div class="extra" id="Snap.filter.contrast-extra"></div> <div class="extra" id="Snap.filter.contrast-extra"></div>

35
src/filter.js
View File

@ -111,10 +111,20 @@ Snap.plugin(function (Snap, Element, Paper, glob) {
** **
* Returns an SVG markup string for the shadow filter * Returns an SVG markup string for the shadow filter
** **
- dx (number) horizontal shift of the shadow, in pixels - dx (number) #optional horizontal shift of the shadow, in pixels
- dy (number) vertical shift of the shadow, in pixels - dy (number) #optional vertical shift of the shadow, in pixels
- blur (number) #optional amount of blur - blur (number) #optional amount of blur
- color (string) #optional color of the shadow - color (string) #optional color of the shadow
- opacity (number) #optional `0..1` opacity of the shadow
* or
- dx (number) #optional horizontal shift of the shadow, in pixels
- dy (number) #optional vertical shift of the shadow, in pixels
- color (string) #optional color of the shadow
- opacity (number) #optional `0..1` opacity of the shadow
* which makes blur default to `4`. Or
- dx (number) #optional horizontal shift of the shadow, in pixels
- dy (number) #optional vertical shift of the shadow, in pixels
- opacity (number) #optional `0..1` opacity of the shadow
= (string) filter representation = (string) filter representation
> Usage > Usage
| var f = paper.filter(Snap.filter.shadow(0, 2, 3)), | var f = paper.filter(Snap.filter.shadow(0, 2, 3)),
@ -122,14 +132,22 @@ Snap.plugin(function (Snap, Element, Paper, glob) {
| filter: f | filter: f
| }); | });
\*/ \*/
Snap.filter.shadow = function (dx, dy, blur, color) { Snap.filter.shadow = function (dx, dy, blur, color, opacity) {
if (typeof blur == "string") {
color = blur;
opacity = color;
blur = 4;
}
if (typeof color != "string") {
opacity = color;
color = "#000";
}
color = color || "#000"; color = color || "#000";
if (blur == null) { if (blur == null) {
blur = 4; blur = 4;
} }
if (typeof blur == "string") { if (opacity == null) {
color = blur; opacity = 1;
blur = 4;
} }
if (dx == null) { if (dx == null) {
dx = 0; dx = 0;
@ -139,11 +157,12 @@ Snap.plugin(function (Snap, Element, Paper, glob) {
dy = dx; dy = dx;
} }
color = Snap.color(color); color = Snap.color(color);
return Snap.format('<feGaussianBlur in="SourceAlpha" stdDeviation="{blur}"/><feOffset dx="{dx}" dy="{dy}" result="offsetblur"/><feFlood flood-color="{color}"/><feComposite in2="offsetblur" operator="in"/><feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge>', { return Snap.format('<feGaussianBlur in="SourceAlpha" stdDeviation="{blur}"/><feOffset dx="{dx}" dy="{dy}" result="offsetblur"/><feFlood flood-color="{color}"/><feComposite in2="offsetblur" operator="in"/><feComponentTransfer><feFuncA type="linear" slope="{opacity}"/></feComponentTransfer><feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge>', {
color: color, color: color,
dx: dx, dx: dx,
dy: dy, dy: dy,
blur: blur blur: blur,
opacity: opacity
}); });
}; };
Snap.filter.shadow.toString = function () { Snap.filter.shadow.toString = function () {