Fix for bug #165 — added opacity option for shadow filters
Dmitry Baranovskiy
parent
7a4e7a8632
commit
5b3e509fb6
File diff suppressed because one or more lines are too long
|
|
@ -14,7 +14,7 @@
|
|||
// See the License for the specific language governing permissions and
|
||||
// limitations under the License.
|
||||
//
|
||||
// build: 2014-01-08
|
||||
// build: 2014-01-13
|
||||
// Copyright (c) 2013 Adobe Systems Incorporated. All rights reserved.
|
||||
//
|
||||
// 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
|
||||
**
|
||||
- dx (number) horizontal shift of the shadow, in pixels
|
||||
- dy (number) vertical shift of the shadow, in pixels
|
||||
- dx (number) #optional horizontal shift of the shadow, in pixels
|
||||
- dy (number) #optional vertical shift of the shadow, in pixels
|
||||
- blur (number) #optional amount of blur
|
||||
- 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
|
||||
> Usage
|
||||
| var f = paper.filter(Snap.filter.shadow(0, 2, 3)),
|
||||
|
|
@ -6779,14 +6789,22 @@ Snap.plugin(function (Snap, Element, Paper, glob) {
|
|||
| 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";
|
||||
if (blur == null) {
|
||||
blur = 4;
|
||||
}
|
||||
if (typeof blur == "string") {
|
||||
color = blur;
|
||||
blur = 4;
|
||||
if (opacity == null) {
|
||||
opacity = 1;
|
||||
}
|
||||
if (dx == null) {
|
||||
dx = 0;
|
||||
|
|
@ -6796,11 +6814,12 @@ Snap.plugin(function (Snap, Element, Paper, glob) {
|
|||
dy = dx;
|
||||
}
|
||||
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,
|
||||
dx: dx,
|
||||
dy: dy,
|
||||
blur: blur
|
||||
blur: blur,
|
||||
opacity: opacity
|
||||
});
|
||||
};
|
||||
Snap.filter.shadow.toString = function () {
|
||||
|
|
|
|||
|
|
@ -8745,7 +8745,7 @@ prototypes). This allow you to extend anything you want.
|
|||
|
||||
<article id="Snap.filter.shadow">
|
||||
<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">⚓</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">➭</a></h3>
|
||||
<h3 class="dr-method">Snap.filter.shadow(…)<a href="#Snap.filter.shadow" title="Link to this section" class="dr-hash">⚓</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">➭</a></h3>
|
||||
</header>
|
||||
<section>
|
||||
<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>
|
||||
<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>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>
|
||||
</div>
|
||||
|
|
@ -8839,7 +8915,7 @@ prototypes). This allow you to extend anything you want.
|
|||
|
||||
<article id="Snap.filter.grayscale">
|
||||
<header>
|
||||
<h3 class="dr-method">Snap.filter.grayscale(amount)<a href="#Snap.filter.grayscale" title="Link to this section" class="dr-hash">⚓</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">➭</a></h3>
|
||||
<h3 class="dr-method">Snap.filter.grayscale(amount)<a href="#Snap.filter.grayscale" title="Link to this section" class="dr-hash">⚓</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">➭</a></h3>
|
||||
</header>
|
||||
<section>
|
||||
<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">
|
||||
<header>
|
||||
<h3 class="dr-method">Snap.filter.sepia(amount)<a href="#Snap.filter.sepia" title="Link to this section" class="dr-hash">⚓</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">➭</a></h3>
|
||||
<h3 class="dr-method">Snap.filter.sepia(amount)<a href="#Snap.filter.sepia" title="Link to this section" class="dr-hash">⚓</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">➭</a></h3>
|
||||
</header>
|
||||
<section>
|
||||
<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">
|
||||
<header>
|
||||
<h3 class="dr-method">Snap.filter.saturate(amount)<a href="#Snap.filter.saturate" title="Link to this section" class="dr-hash">⚓</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">➭</a></h3>
|
||||
<h3 class="dr-method">Snap.filter.saturate(amount)<a href="#Snap.filter.saturate" title="Link to this section" class="dr-hash">⚓</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">➭</a></h3>
|
||||
</header>
|
||||
<section>
|
||||
<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">
|
||||
<header>
|
||||
<h3 class="dr-method">Snap.filter.hueRotate(angle)<a href="#Snap.filter.hueRotate" title="Link to this section" class="dr-hash">⚓</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">➭</a></h3>
|
||||
<h3 class="dr-method">Snap.filter.hueRotate(angle)<a href="#Snap.filter.hueRotate" title="Link to this section" class="dr-hash">⚓</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">➭</a></h3>
|
||||
</header>
|
||||
<section>
|
||||
<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">
|
||||
<header>
|
||||
<h3 class="dr-method">Snap.filter.invert(amount)<a href="#Snap.filter.invert" title="Link to this section" class="dr-hash">⚓</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">➭</a></h3>
|
||||
<h3 class="dr-method">Snap.filter.invert(amount)<a href="#Snap.filter.invert" title="Link to this section" class="dr-hash">⚓</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">➭</a></h3>
|
||||
</header>
|
||||
<section>
|
||||
<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">
|
||||
<header>
|
||||
<h3 class="dr-method">Snap.filter.brightness(amount)<a href="#Snap.filter.brightness" title="Link to this section" class="dr-hash">⚓</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">➭</a></h3>
|
||||
<h3 class="dr-method">Snap.filter.brightness(amount)<a href="#Snap.filter.brightness" title="Link to this section" class="dr-hash">⚓</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">➭</a></h3>
|
||||
</header>
|
||||
<section>
|
||||
<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">
|
||||
<header>
|
||||
<h3 class="dr-method">Snap.filter.contrast(amount)<a href="#Snap.filter.contrast" title="Link to this section" class="dr-hash">⚓</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">➭</a></h3>
|
||||
<h3 class="dr-method">Snap.filter.contrast(amount)<a href="#Snap.filter.contrast" title="Link to this section" class="dr-hash">⚓</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">➭</a></h3>
|
||||
</header>
|
||||
<section>
|
||||
<div class="extra" id="Snap.filter.contrast-extra"></div>
|
||||
|
|
|
|||
|
|
@ -111,10 +111,20 @@ Snap.plugin(function (Snap, Element, Paper, glob) {
|
|||
**
|
||||
* Returns an SVG markup string for the shadow filter
|
||||
**
|
||||
- dx (number) horizontal shift of the shadow, in pixels
|
||||
- dy (number) vertical shift of the shadow, in pixels
|
||||
- dx (number) #optional horizontal shift of the shadow, in pixels
|
||||
- dy (number) #optional vertical shift of the shadow, in pixels
|
||||
- blur (number) #optional amount of blur
|
||||
- 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
|
||||
> Usage
|
||||
| var f = paper.filter(Snap.filter.shadow(0, 2, 3)),
|
||||
|
|
@ -122,14 +132,22 @@ Snap.plugin(function (Snap, Element, Paper, glob) {
|
|||
| 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";
|
||||
if (blur == null) {
|
||||
blur = 4;
|
||||
}
|
||||
if (typeof blur == "string") {
|
||||
color = blur;
|
||||
blur = 4;
|
||||
if (opacity == null) {
|
||||
opacity = 1;
|
||||
}
|
||||
if (dx == null) {
|
||||
dx = 0;
|
||||
|
|
@ -139,11 +157,12 @@ Snap.plugin(function (Snap, Element, Paper, glob) {
|
|||
dy = dx;
|
||||
}
|
||||
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,
|
||||
dx: dx,
|
||||
dy: dy,
|
||||
blur: blur
|
||||
blur: blur,
|
||||
opacity: opacity
|
||||
});
|
||||
};
|
||||
Snap.filter.shadow.toString = function () {
|
||||
|
|
|
|||
Loading…
Reference in New Issue