- Added opacity function
authorDean Jackson <dino@apple.com>
Wed, 07 Sep 2011 10:26:03 +1000
changeset 36b31bb9367aef
parent 35 31e848f19ceb
child 37 9334361468ef
- Added opacity function
- Corrected luminanceToAlpha values
filters/master/ChangeLog
filters/master/Filters.html
filters/publish/ChangeLog
filters/publish/Filters.html
     1.1 --- a/filters/master/ChangeLog	Wed Aug 31 10:55:35 2011 +1000
     1.2 +++ b/filters/master/ChangeLog	Wed Sep 07 10:26:03 2011 +1000
     1.3 @@ -1,6 +1,11 @@
     1.4  Changes for Filter Effects specification
     1.5  ----------------------------------------
     1.6  
     1.7 +2011-09-07  Dean Jackson  <dino@apple.com>
     1.8 +
     1.9 +- Added opacity function
    1.10 +- Corrected luminanceToAlpha values
    1.11 +
    1.12  2011-08-31  Dean Jackson  <dino@apple.com>
    1.13  
    1.14  - Remove commas from shorthand function parameter input.
     2.1 --- a/filters/master/Filters.html	Wed Aug 31 10:55:35 2011 +1000
     2.2 +++ b/filters/master/Filters.html	Wed Sep 07 10:26:03 2011 +1000
     2.3 @@ -407,6 +407,18 @@
     2.4    </dd>
     2.5  
     2.6    <dt>
     2.7 +    opacity(amount)
     2.8 +  </dt>
     2.9 +  <dd>
    2.10 +    Applies transparency to the samples in the input image. The value of 'amount' defines the proportion
    2.11 +    of the conversion. A value of 1 is completely transparent. A value of 0 leaves the
    2.12 +    input unchanged. Values between 0 and 1 are linear multipliers on the effect.
    2.13 +    This is equivalent to multiplying the input image samples by (1 - amount).
    2.14 +    If the 'amount' parameter is missing, a value of 1 is used.
    2.15 +    The markup equivalent of this function is <a href="#opacityEquivalent">given below</a>.
    2.16 +  </dd>
    2.17 +
    2.18 +  <dt>
    2.19      gamma(amplitude exponent offset)
    2.20    </dt>
    2.21    <dd>
    2.22 @@ -1498,11 +1510,11 @@
    2.23            equivalent to the following matrix operation: 
    2.24        <p>
    2.25        <object data="mathml/feColorMatrix01.mml" type="application/mathml+xml" width="100%" height="130">
    2.26 -          <pre>| R' |     |0.213+0.787s  0.715-0.715s  0.072-0.072s 0  0 |   | R |
    2.27 -| G' |     |0.213-0.213s  0.715+0.285s  0.072-0.072s 0  0 |   | G |
    2.28 -| B' |  =  |0.213-0.213s  0.715-0.715s  0.072+0.928s 0  0 | * | B |
    2.29 -| A' |     |           0            0             0  1  0 |   | A |
    2.30 -| 1  |     |           0            0             0  0  1 |   | 1 |</pre>
    2.31 +          <pre>| R' |     | (0.2127 + 0.7873s)  (0.7152 - 0.7152s)  (0.0722 - 0.0722s) 0  0 |   | R |
    2.32 +| G' |     | (0.2127 - 0.2127s)  (0.7152 + 0.2848s)  (0.0722 - 0.0722s) 0  0 |   | G |
    2.33 +| B' |  =  | (0.2127 - 0.2127s)  (0.7152 - 0.7152s)  (0.0722 + 0.9278s) 0  0 | * | B |
    2.34 +| A' |     |           0                   0                   0        1  0 |   | A |
    2.35 +| 1  |     |           0                   0                   0        0  1 |   | 1 |</pre>
    2.36        </object>
    2.37      </p>
    2.38          </li>
    2.39 @@ -1523,21 +1535,23 @@
    2.40            where the terms a00, a01, etc. are calculated as follows: 
    2.41        <p>
    2.42      <object data="mathml/feColorMatrix03.mml" type="application/mathml+xml" width="100%" height="230">
    2.43 -          <pre>| a00 a01 a02 |    [+0.213 +0.715 +0.072]
    2.44 -| a10 a11 a12 | =  [+0.213 +0.715 +0.072] +
    2.45 -| a20 a21 a22 |    [+0.213 +0.715 +0.072]
    2.46 -                        [+0.787 -0.715 -0.072]
    2.47 -cos(hueRotate value) *  [-0.213 +0.285 -0.072] +
    2.48 -                        [-0.213 -0.715 +0.928]
    2.49 -                        [-0.213 -0.715+0.928]
    2.50 -sin(hueRotate value) *  [+0.143 +0.140-0.283]
    2.51 -                        [-0.787 +0.715+0.072]</pre>
    2.52 +          <pre>| a00 a01 a02 |     [0.2127 0.7152 0.0722]
    2.53 +| a10 a11 a12 | =   [0.2127 0.7152 0.0722] +
    2.54 +| a20 a21 a22 |     [0.2127 0.7152 0.0722]
    2.55 +
    2.56 +                                            [ 0.7873 -0.7152 -0.0722]
    2.57 +                    cos(hueRotate value) *  [-0.2127  0.2848 -0.0722] +
    2.58 +                                            [-0.2127 -0.7152  0.9278]
    2.59 +
    2.60 +                                            [-0.2127 -0.7152  0.9278]
    2.61 +                    sin(hueRotate value) *  [ 0.143   0.140  -0.283 ]
    2.62 +                                            [-0.7873  0.7152  0.0722]</pre>
    2.63      </object>
    2.64      </p>
    2.65            Thus, the upper left term of the hue matrix turns out to be:
    2.66        <p>
    2.67      <object data="mathml/feColorMatrix04.mml" type="application/mathml+xml" width="100%" height="30"> 
    2.68 -          <pre>.213 + cos(hueRotate value)*.787 - sin(hueRotate value)*.213</pre>
    2.69 +          <pre>.2127 + cos(hueRotate value) * 0.7873 - sin(hueRotate value) * 0.2127</pre>
    2.70        </object>
    2.71        </p>
    2.72  
    2.73 @@ -1551,7 +1565,7 @@
    2.74            <pre>   | R' |     |      0        0        0  0  0 |   | R |
    2.75     | G' |     |      0        0        0  0  0 |   | G |
    2.76     | B' |  =  |      0        0        0  0  0 | * | B |
    2.77 -   | A' |     | 0.2125   0.7154   0.0721  0  0 |   | A |
    2.78 +   | A' |     | 0.2127   0.7152   0.0722  0  0 |   | A |
    2.79     | 1  |     |      0        0        0  0  1 |   | 1 |</pre>
    2.80     </object>
    2.81     </p>
    2.82 @@ -3614,9 +3628,9 @@
    2.83  
    2.84  <pre class="examplesource"> &lt;filter id="grayscale"&gt;
    2.85      &lt;feColorMatrix type="matrix"
    2.86 -               values="(0.2125 * [amount]) (0.7154 * [amount]) (0.0721 * [amount]) 0 0
    2.87 -                       (0.2125 * [amount]) (0.7154 * [amount]) (0.0721 * [amount]) 0 0
    2.88 -                       (0.2125 * [amount]) (0.7154 * [amount]) (0.0721 * [amount]) 0 0
    2.89 +               values="(0.2127 * [amount]) (0.7152 * [amount]) (0.0722 * [amount]) 0 0
    2.90 +                       (0.2127 * [amount]) (0.7152 * [amount]) (0.0722 * [amount]) 0 0
    2.91 +                       (0.2127 * [amount]) (0.7152 * [amount]) (0.0722 * [amount]) 0 0
    2.92                         0 0 0 1 0"/&gt;
    2.93    &lt;/filter&gt; </pre>
    2.94  
    2.95 @@ -3654,6 +3668,14 @@
    2.96      &lt;/feComponentTransfer&gt;
    2.97    &lt;/filter&gt; </pre>
    2.98  
    2.99 +<h3 id="opacityEquivalent">opacity</h3>
   2.100 +
   2.101 +<pre class="examplesource"> &lt;filter id="opacity"&gt;
   2.102 +    &lt;feComponentTransfer&gt;
   2.103 +        &lt;feFuncA type="table" tableValues="0 [amount]"/&gt;
   2.104 +    &lt;/feComponentTransfer&gt;
   2.105 +  &lt;/filter&gt; </pre>
   2.106 +
   2.107  <h3 id="gammaEquivalent">gamma</h3>
   2.108  
   2.109  <pre class="examplesource"> &lt;filter id="gamma"&gt;
     3.1 --- a/filters/publish/ChangeLog	Wed Aug 31 10:55:35 2011 +1000
     3.2 +++ b/filters/publish/ChangeLog	Wed Sep 07 10:26:03 2011 +1000
     3.3 @@ -1,6 +1,11 @@
     3.4  Changes for Filter Effects specification
     3.5  ----------------------------------------
     3.6  
     3.7 +2011-09-07  Dean Jackson  <dino@apple.com>
     3.8 +
     3.9 +- Added opacity function
    3.10 +- Corrected luminanceToAlpha values
    3.11 +
    3.12  2011-08-31  Dean Jackson  <dino@apple.com>
    3.13  
    3.14  - Remove commas from shorthand function parameter input.
     4.1 --- a/filters/publish/Filters.html	Wed Aug 31 10:55:35 2011 +1000
     4.2 +++ b/filters/publish/Filters.html	Wed Sep 07 10:26:03 2011 +1000
     4.3 @@ -14,7 +14,7 @@
     4.4  <div class="head">
     4.5    <p><a href="http://www.w3.org/"><img height="48" width="72" alt="W3C" src="http://www.w3.org/Icons/w3c_home"/></a></p>
     4.6    <h1 id="pagetitle">Filter Effects 1.0: Language</h1>
     4.7 -  <h2 id="pagesubtitle">W3C Editor’s Draft <em>31 August 2011</em></h2>
     4.8 +  <h2 id="pagesubtitle">W3C Editor’s Draft <em>07 September 2011</em></h2>
     4.9    <dl><dt>This version:</dt><dd><a href="https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/publish/Filters.html" class="url">https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/publish/Filters.html</a></dd><dt>Latest version:</dt><dd><a href="http://www.w3.org/TR/FilterEffects10/" class="url">http://www.w3.org/TR/FilterEffects10/</a></dd><dt>Previous version:</dt><dd><a href="http://www.w3.org/TR/2007/WD-SVGFilter12-20070501/" class="url">http://www.w3.org/TR/2007/WD-SVGFilter12-20070501/</a></dd><dt>Editors:</dt><dd><a href="mailto:ed@opera.com">Erik Dahlström</a>, (<a href="http://www.opera.com/">Opera Software ASA</a>)</dd><dd><a href="mailto:dino@apple.com">Dean Jackson</a> (<a href="http://www.apple.com/">Apple Inc</a>)</dd><dt>Authors:</dt><dd>The authors of this specification are the participants of the W3C SVG and CSS Working Groups.</dd></dl>
    4.10    <p class="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 2011 <a href="http://www.w3.org/"><acronym title="World Wide Web Consortium">W3C</acronym></a><sup>®</sup> (<a href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute of Technology">MIT</acronym></a>, <a href="http://www.ercim.org/"><acronym title="European Research Consortium for Informatics and Mathematics">ERCIM</acronym></a>, <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="http://www.w3.org/Consortium/Legal/copyright-documents">document use</a> rules apply.</p>
    4.11  </div>
    4.12 @@ -142,10 +142,11 @@
    4.13  <li><a href="#saturateEquivalent">32.3 saturate</a></li>
    4.14  <li><a href="#huerotateEquivalent">32.4 hue-rotate</a></li>
    4.15  <li><a href="#invertEquivalent">32.5 invert</a></li>
    4.16 -<li><a href="#gammaEquivalent">32.6 gamma</a></li>
    4.17 -<li><a href="#blurEquivalent">32.7 blur</a></li>
    4.18 -<li><a href="#sharpenEquivalent">32.8 sharpen</a></li>
    4.19 -<li><a href="#dropshadowEquivalent">32.9 drop-shadow</a></li></ul></li>
    4.20 +<li><a href="#opacityEquivalent">32.6 opacity</a></li>
    4.21 +<li><a href="#gammaEquivalent">32.7 gamma</a></li>
    4.22 +<li><a href="#blurEquivalent">32.8 blur</a></li>
    4.23 +<li><a href="#sharpenEquivalent">32.9 sharpen</a></li>
    4.24 +<li><a href="#dropshadowEquivalent">32.10 drop-shadow</a></li></ul></li>
    4.25  <li><a href="#DOMInterfaces">33 DOM interfaces</a><ul class="toc">
    4.26  <li><a href="#InterfaceImageData">33.1 Interface ImageData</a></li>
    4.27  <li><a href="#InterfaceSVGFilterElement">33.2 Interface SVGFilterElement</a></li>
    4.28 @@ -394,6 +395,15 @@
    4.29      If the 'amount' parameter is missing, a value of 1 is used.
    4.30      The markup equivalent of this function is <a href="#invertEquivalent">given below</a>.
    4.31    </dd><dt>
    4.32 +    opacity(amount)
    4.33 +  </dt><dd>
    4.34 +    Applies transparency to the samples in the input image. The value of 'amount' defines the proportion
    4.35 +    of the conversion. A value of 1 is completely transparent. A value of 0 leaves the
    4.36 +    input unchanged. Values between 0 and 1 are linear multipliers on the effect.
    4.37 +    This is equivalent to multiplying the input image samples by (1 - amount).
    4.38 +    If the 'amount' parameter is missing, a value of 1 is used.
    4.39 +    The markup equivalent of this function is <a href="#opacityEquivalent">given below</a>.
    4.40 +  </dd><dt>
    4.41      gamma(amplitude exponent offset)
    4.42    </dt><dd>
    4.43      Applies a gamma function to the input image. 
    4.44 @@ -1369,11 +1379,11 @@
    4.45            equivalent to the following matrix operation: 
    4.46        <p>
    4.47        <object data="mathml/feColorMatrix01.mml" type="application/mathml+xml" width="100%" height="130">
    4.48 -          <pre>| R' |     |0.213+0.787s  0.715-0.715s  0.072-0.072s 0  0 |   | R |
    4.49 -| G' |     |0.213-0.213s  0.715+0.285s  0.072-0.072s 0  0 |   | G |
    4.50 -| B' |  =  |0.213-0.213s  0.715-0.715s  0.072+0.928s 0  0 | * | B |
    4.51 -| A' |     |           0            0             0  1  0 |   | A |
    4.52 -| 1  |     |           0            0             0  0  1 |   | 1 |</pre>
    4.53 +          <pre>| R' |     | (0.2127 + 0.7873s)  (0.7152 - 0.7152s)  (0.0722 - 0.0722s) 0  0 |   | R |
    4.54 +| G' |     | (0.2127 - 0.2127s)  (0.7152 + 0.2848s)  (0.0722 - 0.0722s) 0  0 |   | G |
    4.55 +| B' |  =  | (0.2127 - 0.2127s)  (0.7152 - 0.7152s)  (0.0722 + 0.9278s) 0  0 | * | B |
    4.56 +| A' |     |           0                   0                   0        1  0 |   | A |
    4.57 +| 1  |     |           0                   0                   0        0  1 |   | 1 |</pre>
    4.58        </object>
    4.59      </p>
    4.60          </li><li>For <span class="attr-value">type="hueRotate"</span>, <span class="attr-name">values</span> is a single one real number value
    4.61 @@ -1392,21 +1402,23 @@
    4.62            where the terms a00, a01, etc. are calculated as follows: 
    4.63        <p>
    4.64      <object data="mathml/feColorMatrix03.mml" type="application/mathml+xml" width="100%" height="230">
    4.65 -          <pre>| a00 a01 a02 |    [+0.213 +0.715 +0.072]
    4.66 -| a10 a11 a12 | =  [+0.213 +0.715 +0.072] +
    4.67 -| a20 a21 a22 |    [+0.213 +0.715 +0.072]
    4.68 -                        [+0.787 -0.715 -0.072]
    4.69 -cos(hueRotate value) *  [-0.213 +0.285 -0.072] +
    4.70 -                        [-0.213 -0.715 +0.928]
    4.71 -                        [-0.213 -0.715+0.928]
    4.72 -sin(hueRotate value) *  [+0.143 +0.140-0.283]
    4.73 -                        [-0.787 +0.715+0.072]</pre>
    4.74 +          <pre>| a00 a01 a02 |     [0.2127 0.7152 0.0722]
    4.75 +| a10 a11 a12 | =   [0.2127 0.7152 0.0722] +
    4.76 +| a20 a21 a22 |     [0.2127 0.7152 0.0722]
    4.77 +
    4.78 +                                            [ 0.7873 -0.7152 -0.0722]
    4.79 +                    cos(hueRotate value) *  [-0.2127  0.2848 -0.0722] +
    4.80 +                                            [-0.2127 -0.7152  0.9278]
    4.81 +
    4.82 +                                            [-0.2127 -0.7152  0.9278]
    4.83 +                    sin(hueRotate value) *  [ 0.143   0.140  -0.283 ]
    4.84 +                                            [-0.7873  0.7152  0.0722]</pre>
    4.85      </object>
    4.86      </p>
    4.87            Thus, the upper left term of the hue matrix turns out to be:
    4.88        <p>
    4.89      <object data="mathml/feColorMatrix04.mml" type="application/mathml+xml" width="100%" height="30"> 
    4.90 -          <pre>.213 + cos(hueRotate value)*.787 - sin(hueRotate value)*.213</pre>
    4.91 +          <pre>.2127 + cos(hueRotate value) * 0.7873 - sin(hueRotate value) * 0.2127</pre>
    4.92        </object>
    4.93        </p>
    4.94  
    4.95 @@ -1418,7 +1430,7 @@
    4.96            <pre>   | R' |     |      0        0        0  0  0 |   | R |
    4.97     | G' |     |      0        0        0  0  0 |   | G |
    4.98     | B' |  =  |      0        0        0  0  0 | * | B |
    4.99 -   | A' |     | 0.2125   0.7154   0.0721  0  0 |   | A |
   4.100 +   | A' |     | 0.2127   0.7152   0.0722  0  0 |   | A |
   4.101     | 1  |     |      0        0        0  0  1 |   | 1 |</pre>
   4.102     </object>
   4.103     </p>
   4.104 @@ -3545,9 +3557,9 @@
   4.105  
   4.106  <pre class="examplesource"> &lt;filter id="grayscale"&gt;
   4.107      &lt;feColorMatrix type="matrix"
   4.108 -               values="(0.2125 * [amount]) (0.7154 * [amount]) (0.0721 * [amount]) 0 0
   4.109 -                       (0.2125 * [amount]) (0.7154 * [amount]) (0.0721 * [amount]) 0 0
   4.110 -                       (0.2125 * [amount]) (0.7154 * [amount]) (0.0721 * [amount]) 0 0
   4.111 +               values="(0.2127 * [amount]) (0.7152 * [amount]) (0.0722 * [amount]) 0 0
   4.112 +                       (0.2127 * [amount]) (0.7152 * [amount]) (0.0722 * [amount]) 0 0
   4.113 +                       (0.2127 * [amount]) (0.7152 * [amount]) (0.0722 * [amount]) 0 0
   4.114                         0 0 0 1 0"/&gt;
   4.115    &lt;/filter&gt; </pre>
   4.116  
   4.117 @@ -3585,7 +3597,15 @@
   4.118      &lt;/feComponentTransfer&gt;
   4.119    &lt;/filter&gt; </pre>
   4.120  
   4.121 -<h3 id="gammaEquivalent">32.6 gamma</h3>
   4.122 +<h3 id="opacityEquivalent">32.6 opacity</h3>
   4.123 +
   4.124 +<pre class="examplesource"> &lt;filter id="opacity"&gt;
   4.125 +    &lt;feComponentTransfer&gt;
   4.126 +        &lt;feFuncA type="table" tableValues="0 [amount]"/&gt;
   4.127 +    &lt;/feComponentTransfer&gt;
   4.128 +  &lt;/filter&gt; </pre>
   4.129 +
   4.130 +<h3 id="gammaEquivalent">32.7 gamma</h3>
   4.131  
   4.132  <pre class="examplesource"> &lt;filter id="gamma"&gt;
   4.133      &lt;feComponentTransfer&gt;
   4.134 @@ -3595,19 +3615,19 @@
   4.135      &lt;/feComponentTransfer&gt;
   4.136    &lt;/filter&gt; </pre>
   4.137  
   4.138 -<h3 id="blurEquivalent">32.7 blur</h3>
   4.139 +<h3 id="blurEquivalent">32.8 blur</h3>
   4.140  
   4.141  <pre class="examplesource"> &lt;filter id="blur"&gt;
   4.142      &lt;feGaussianBlur stdDeviation="[radiusX radiusY]"&gt;
   4.143    &lt;/filter&gt; </pre>
   4.144  
   4.145 -<h3 id="sharpenEquivalent">32.8 sharpen</h3>
   4.146 +<h3 id="sharpenEquivalent">32.9 sharpen</h3>
   4.147  
   4.148  <pre class="examplesource"> &lt;filter id="unsharp"&gt;
   4.149      &lt;feUnsharpMask stdDeviation="[radius]" threshold="[threshold]" amount="[amount]"&gt;
   4.150    &lt;/filter&gt; </pre>
   4.151  
   4.152 -<h3 id="dropshadowEquivalent">32.9 drop-shadow</h3>
   4.153 +<h3 id="dropshadowEquivalent">32.10 drop-shadow</h3>
   4.154  
   4.155  <pre class="examplesource"> &lt;filter id="drop-shadow"&gt;
   4.156      &lt;feGaussianBlur in="[alpha-channel-of-input]" stdDeviation="[radius]"/&gt;