Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
[giow] (0) Add SVG paths to Path objects in canvas.
Affected topics: Canvas

git-svn-id: http://svn.whatwg.org/webapps@7026 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information
Hixie committed Mar 13, 2012
1 parent e25d3f9 commit 538bd74
Show file tree
Hide file tree
Showing 3 changed files with 134 additions and 32 deletions.
52 changes: 41 additions & 11 deletions complete.html
Expand Up @@ -35015,6 +35015,7 @@ <h5 id=2dcontext><span class=secno>4.8.11.1 </span>The 2D context</h5>

[<a href=#dom-path title=dom-Path>Constructor</a>(optional <a href=#element>Element</a> scope)]
interface <dfn id=path>Path</dfn> {
void <a href=#dom-path-addpathdata title=dom-path-addPathData>addPathData</a>(DOMString d);
void <a href=#dom-path-addfill title=dom-path-addFill>addFill</a>(<a href=#path>Path</a> path);
void <a href=#dom-path-addstroke title=dom-path-addStroke>addStroke</a>(<a href=#path>Path</a> path);
void <span title=dom-path-addFillText>addFillText</span>(DOMString text, double x, double y, optional double maxWidth);
Expand Down Expand Up @@ -36252,6 +36253,14 @@ <h6 id=path-objects><span class=secno>4.8.11.1.6 </span><code><a href=#path>Path

</dd>

<dt><var title="">path</var> . <code title=dom-path-addPathData><a href=#dom-path-addpathdata>addPathData</a></code>(<var title="">d</var>)</dt>

<dd>

<p>Adds to the path the path described by the argument, interpreted as SVG path data. <a href=#refsSVG>[SVG]</a></p>

</dd>

<dt><var title="">path</var> . <code title=dom-path-addFill><a href=#dom-path-addfill>addFill</a></code>(<var title="">path</var>)</dt>
<dt><var title="">path</var> . <code title=dom-path-addStroke><a href=#dom-path-addstroke>addStroke</a></code>(<var title="">path</var>)</dt>

Expand Down Expand Up @@ -36286,7 +36295,32 @@ <h6 id=path-objects><span class=secno>4.8.11.1.6 </span><code><a href=#path>Path
<code><a href=#window>Window</a></code> object on which the interface object of the
invoked constructor is found.</p>

<p>The <dfn id=dom-path-addfill title=dom-path-addFill><code>addFill(<var title="">b</var>)</code></dfn> method, when invoked on a

<p>The <dfn id=dom-path-addpathdata title=dom-path-addPathData><code>addPathData(<var title="">d</var>)</code> method must run the following steps:</dfn></p>

<ol><li><p>Parse and interpret the <var title="">d</var> argument
according to the SVG specification's rules for path data, thus
obtaining an SVG path. <a href=#refsSVG>[SVG]</a></li>

<li><p>If this failed in some way, then throw a
<code><a href=#syntaxerror>SyntaxError</a></code> exception, and abort these steps.</li>

<li><p>Transform all the coordinates and lines in the SVG path by
the <a href=#transformations title=dom-context-2d-transformation>current
transformation matrix</a> of the <code><a href=#path>Path</a></code>
object.</li>

<li><p>Let (<var title="">x</var>, <var title="">y</var>) be the
last point in the SVG path.</li>

<li><p>Add all the subpaths in the SVG path, if any, to the
<code><a href=#path>Path</a></code> object. </p>

<li><p>Create a new subpath in the <code><a href=#path>Path</a></code> object with
(<var title="">x</var>, <var title="">y</var>) as the only point in
the subpath.</li>

</ol><p>The <dfn id=dom-path-addfill title=dom-path-addFill><code>addFill(<var title="">b</var>)</code></dfn> method, when invoked on a
<code><a href=#path>Path</a></code> object <var title="">a</var>, must run the
following steps:</p>

Expand All @@ -36296,9 +36330,8 @@ <h6 id=path-objects><span class=secno>4.8.11.1.6 </span><code><a href=#path>Path
<li><p>Create a copy of all the subpaths in <var title="">b</var>.
Let this copy be known as <var title="">c</var>.</li>

<li><p>Transform all the coordinates in <var title="">c</var> by
the <a href=#transformations title=dom-context-2d-transformation>current
transformation matrix</a> of <var title="">a</var>.</li>
<li><p>Transform all the coordinates and lines in <var title="">c</var> by the <a href=#transformations title=dom-context-2d-transformation>current transformation
matrix</a> of <var title="">a</var>.</li>

<li><p>Let (<var title="">x</var>, <var title="">y</var>) be the
last point in the last subpath of <var title="">c</var>.</li>
Expand All @@ -36318,9 +36351,8 @@ <h6 id=path-objects><span class=secno>4.8.11.1.6 </span><code><a href=#path>Path
<li><p>Create a copy of all the subpaths in <var title="">b</var>.
Let this copy be known as <var title="">c</var>.</li>

<li><p>Transform all the coordinates in <var title="">c</var> by
the <a href=#transformations title=dom-context-2d-transformation>current
transformation matrix</a> of <var title="">a</var>.</li>
<li><p>Transform all the coordinates and lines in <var title="">c</var> by the <a href=#transformations title=dom-context-2d-transformation>current transformation
matrix</a> of <var title="">a</var>.</li>

<li><p>Create a new list of subpaths <var title="">d</var>,
consisting of the subpaths necessary to describe the result of
Expand Down Expand Up @@ -36405,8 +36437,7 @@ <h6 id=path-objects><span class=secno>4.8.11.1.6 </span><code><a href=#path>Path
These subpaths in <var title="">glyph subpaths</var> must also all
wind clockwise.</p>

<li><p>Transform all the coordinates in <var title="">glyph
subpaths</var> by the <a href=#transformations title=dom-context-2d-transformation>current transformation
<li><p>Transform all the coordinates and lines in <var title="">glyph subpaths</var> by the <a href=#transformations title=dom-context-2d-transformation>current transformation
matrix</a> of the <code><a href=#path>Path</a></code> object.</li>

<li><p>Let (<var title="">x<sub title="">final</sub></var>, <var title="">y<sub title="">final</sub></var>) be the last point in the
Expand Down Expand Up @@ -36521,8 +36552,7 @@ <h6 id=path-objects><span class=secno>4.8.11.1.6 </span><code><a href=#path>Path
These subpaths in <var title="">glyph subpaths</var> must also
all wind clockwise.</p>

<li><p>Transform all the coordinates in <var title="">glyph
subpaths</var> by the <a href=#transformations title=dom-context-2d-transformation>current transformation
<li><p>Transform all the coordinates and lines in <var title="">glyph subpaths</var> by the <a href=#transformations title=dom-context-2d-transformation>current transformation
matrix</a> of <var title="">target</var>.</li>

<li><p>Let (<var title="">x<sub title="">final</sub></var>, <var title="">y<sub title="">final</sub></var>) be the last point in
Expand Down
52 changes: 41 additions & 11 deletions index
Expand Up @@ -35015,6 +35015,7 @@ interface <dfn id=imagedata>ImageData</dfn> {

[<a href=#dom-path title=dom-Path>Constructor</a>(optional <a href=#element>Element</a> scope)]
interface <dfn id=path>Path</dfn> {
void <a href=#dom-path-addpathdata title=dom-path-addPathData>addPathData</a>(DOMString d);
void <a href=#dom-path-addfill title=dom-path-addFill>addFill</a>(<a href=#path>Path</a> path);
void <a href=#dom-path-addstroke title=dom-path-addStroke>addStroke</a>(<a href=#path>Path</a> path);
void <span title=dom-path-addFillText>addFillText</span>(DOMString text, double x, double y, optional double maxWidth);
Expand Down Expand Up @@ -36252,6 +36253,14 @@ try {

</dd>

<dt><var title="">path</var> . <code title=dom-path-addPathData><a href=#dom-path-addpathdata>addPathData</a></code>(<var title="">d</var>)</dt>

<dd>

<p>Adds to the path the path described by the argument, interpreted as SVG path data. <a href=#refsSVG>[SVG]</a></p>

</dd>

<dt><var title="">path</var> . <code title=dom-path-addFill><a href=#dom-path-addfill>addFill</a></code>(<var title="">path</var>)</dt>
<dt><var title="">path</var> . <code title=dom-path-addStroke><a href=#dom-path-addstroke>addStroke</a></code>(<var title="">path</var>)</dt>

Expand Down Expand Up @@ -36286,7 +36295,32 @@ try {
<code><a href=#window>Window</a></code> object on which the interface object of the
invoked constructor is found.</p>

<p>The <dfn id=dom-path-addfill title=dom-path-addFill><code>addFill(<var title="">b</var>)</code></dfn> method, when invoked on a

<p>The <dfn id=dom-path-addpathdata title=dom-path-addPathData><code>addPathData(<var title="">d</var>)</code> method must run the following steps:</dfn></p>

<ol><li><p>Parse and interpret the <var title="">d</var> argument
according to the SVG specification's rules for path data, thus
obtaining an SVG path. <a href=#refsSVG>[SVG]</a></li>

<li><p>If this failed in some way, then throw a
<code><a href=#syntaxerror>SyntaxError</a></code> exception, and abort these steps.</li>

<li><p>Transform all the coordinates and lines in the SVG path by
the <a href=#transformations title=dom-context-2d-transformation>current
transformation matrix</a> of the <code><a href=#path>Path</a></code>
object.</li>

<li><p>Let (<var title="">x</var>, <var title="">y</var>) be the
last point in the SVG path.</li>

<li><p>Add all the subpaths in the SVG path, if any, to the
<code><a href=#path>Path</a></code> object. </p>

<li><p>Create a new subpath in the <code><a href=#path>Path</a></code> object with
(<var title="">x</var>, <var title="">y</var>) as the only point in
the subpath.</li>

</ol><p>The <dfn id=dom-path-addfill title=dom-path-addFill><code>addFill(<var title="">b</var>)</code></dfn> method, when invoked on a
<code><a href=#path>Path</a></code> object <var title="">a</var>, must run the
following steps:</p>

Expand All @@ -36296,9 +36330,8 @@ try {
<li><p>Create a copy of all the subpaths in <var title="">b</var>.
Let this copy be known as <var title="">c</var>.</li>

<li><p>Transform all the coordinates in <var title="">c</var> by
the <a href=#transformations title=dom-context-2d-transformation>current
transformation matrix</a> of <var title="">a</var>.</li>
<li><p>Transform all the coordinates and lines in <var title="">c</var> by the <a href=#transformations title=dom-context-2d-transformation>current transformation
matrix</a> of <var title="">a</var>.</li>

<li><p>Let (<var title="">x</var>, <var title="">y</var>) be the
last point in the last subpath of <var title="">c</var>.</li>
Expand All @@ -36318,9 +36351,8 @@ try {
<li><p>Create a copy of all the subpaths in <var title="">b</var>.
Let this copy be known as <var title="">c</var>.</li>

<li><p>Transform all the coordinates in <var title="">c</var> by
the <a href=#transformations title=dom-context-2d-transformation>current
transformation matrix</a> of <var title="">a</var>.</li>
<li><p>Transform all the coordinates and lines in <var title="">c</var> by the <a href=#transformations title=dom-context-2d-transformation>current transformation
matrix</a> of <var title="">a</var>.</li>

<li><p>Create a new list of subpaths <var title="">d</var>,
consisting of the subpaths necessary to describe the result of
Expand Down Expand Up @@ -36405,8 +36437,7 @@ try {
These subpaths in <var title="">glyph subpaths</var> must also all
wind clockwise.</p>

<li><p>Transform all the coordinates in <var title="">glyph
subpaths</var> by the <a href=#transformations title=dom-context-2d-transformation>current transformation
<li><p>Transform all the coordinates and lines in <var title="">glyph subpaths</var> by the <a href=#transformations title=dom-context-2d-transformation>current transformation
matrix</a> of the <code><a href=#path>Path</a></code> object.</li>

<li><p>Let (<var title="">x<sub title="">final</sub></var>, <var title="">y<sub title="">final</sub></var>) be the last point in the
Expand Down Expand Up @@ -36521,8 +36552,7 @@ try {
These subpaths in <var title="">glyph subpaths</var> must also
all wind clockwise.</p>

<li><p>Transform all the coordinates in <var title="">glyph
subpaths</var> by the <a href=#transformations title=dom-context-2d-transformation>current transformation
<li><p>Transform all the coordinates and lines in <var title="">glyph subpaths</var> by the <a href=#transformations title=dom-context-2d-transformation>current transformation
matrix</a> of <var title="">target</var>.</li>

<li><p>Let (<var title="">x<sub title="">final</sub></var>, <var title="">y<sub title="">final</sub></var>) be the last point in
Expand Down
62 changes: 52 additions & 10 deletions source
Expand Up @@ -40694,6 +40694,7 @@ interface <dfn>ImageData</dfn> {

[<span title="dom-Path">Constructor</span>(optional <span>Element</span> scope)]
interface <dfn>Path</dfn> {
void <span title="dom-path-addPathData">addPathData</span>(DOMString d);
void <span title="dom-path-addFill">addFill</span>(<span>Path</span> path);
void <span title="dom-path-addStroke">addStroke</span>(<span>Path</span> path);
void <span title="dom-path-addFillText">addFillText</span>(DOMString text, double x, double y, optional double maxWidth);
Expand Down Expand Up @@ -42165,6 +42166,14 @@ try {

</dd>

<dt><var title="">path</var> . <code title="dom-path-addPathData">addPathData</code>(<var title="">d</var>)</dt>

<dd>

<p>Adds to the path the path described by the argument, interpreted as SVG path data. <a href="#refsSVG">[SVG]</a></p>

</dd>

<dt><var title="">path</var> . <code title="dom-path-addFill">addFill</code>(<var title="">path</var>)</dt>
<dt><var title="">path</var> . <code title="dom-path-addStroke">addStroke</code>(<var title="">path</var>)</dt>

Expand Down Expand Up @@ -42201,6 +42210,37 @@ try {
<code>Window</code> object on which the interface object of the
invoked constructor is found.</p>


<p>The <dfn title="dom-path-addPathData"><code>addPathData(<var
title="">d</var>)</code> method must run the following steps:</p>

<ol>

<li><p>Parse and interpret the <var title="">d</var> argument
according to the SVG specification's rules for path data, thus
obtaining an SVG path. <a href="#refsSVG">[SVG]</a></p></li>

<li><p>If this failed in some way, then throw a
<code>SyntaxError</code> exception, and abort these steps.</p></li>

<li><p>Transform all the coordinates and lines in the SVG path by
the <span title="dom-context-2d-transformation">current
transformation matrix</span> of the <code>Path</code>
object.</p></li>

<li><p>Let (<var title="">x</var>, <var title="">y</var>) be the
last point in the SVG path.</p></li>

<li><p>Add all the subpaths in the SVG path, if any, to the
<code>Path</code> object. </p>

<li><p>Create a new subpath in the <code>Path</code> object with
(<var title="">x</var>, <var title="">y</var>) as the only point in
the subpath.</p></li>

</ol>


<p>The <dfn title="dom-path-addFill"><code>addFill(<var
title="">b</var>)</code></dfn> method, when invoked on a
<code>Path</code> object <var title="">a</var>, must run the
Expand All @@ -42214,9 +42254,10 @@ try {
<li><p>Create a copy of all the subpaths in <var title="">b</var>.
Let this copy be known as <var title="">c</var>.</p></li>

<li><p>Transform all the coordinates in <var title="">c</var> by
the <span title="dom-context-2d-transformation">current
transformation matrix</span> of <var title="">a</var>.</p></li>
<li><p>Transform all the coordinates and lines in <var
title="">c</var> by the <span
title="dom-context-2d-transformation">current transformation
matrix</span> of <var title="">a</var>.</p></li>

<li><p>Let (<var title="">x</var>, <var title="">y</var>) be the
last point in the last subpath of <var title="">c</var>.</p></li>
Expand All @@ -42243,9 +42284,10 @@ try {
<li><p>Create a copy of all the subpaths in <var title="">b</var>.
Let this copy be known as <var title="">c</var>.</p></li>

<li><p>Transform all the coordinates in <var title="">c</var> by
the <span title="dom-context-2d-transformation">current
transformation matrix</span> of <var title="">a</var>.</p></li>
<li><p>Transform all the coordinates and lines in <var
title="">c</var> by the <span
title="dom-context-2d-transformation">current transformation
matrix</span> of <var title="">a</var>.</p></li>

<li><p>Create a new list of subpaths <var title="">d</var>,
consisting of the subpaths necessary to describe the result of
Expand Down Expand Up @@ -42353,8 +42395,8 @@ try {
These subpaths in <var title="">glyph subpaths</var> must also all
wind clockwise.</p>

<li><p>Transform all the coordinates in <var title="">glyph
subpaths</var> by the <span
<li><p>Transform all the coordinates and lines in <var
title="">glyph subpaths</var> by the <span
title="dom-context-2d-transformation">current transformation
matrix</span> of the <code>Path</code> object.</p></li>

Expand Down Expand Up @@ -42500,8 +42542,8 @@ try {
These subpaths in <var title="">glyph subpaths</var> must also
all wind clockwise.</p>

<li><p>Transform all the coordinates in <var title="">glyph
subpaths</var> by the <span
<li><p>Transform all the coordinates and lines in <var
title="">glyph subpaths</var> by the <span
title="dom-context-2d-transformation">current transformation
matrix</span> of <var title="">target</var>.</p></li>

Expand Down

0 comments on commit 538bd74

Please sign in to comment.