Skip to content

Commit

Permalink
[giow] (3) Change how tracing a path works so that it's more similar …
Browse files Browse the repository at this point in the history 
…to SVG, PDF, etc.

Affected topics: Canvas

git-svn-id: http://svn.whatwg.org/webapps@8225 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information
@Hixie
Hixie committed Oct 15, 2013
1 parent 882a9bb commit 59b4599
Show file tree
Hide file tree
Showing 3 changed files with 322 additions and 281 deletions.
184 changes: 98 additions & 86 deletions complete.html
View file
Expand Up @@ -34420,14 +34420,16 @@ <h6 id=line-styles><span class=secno>4.8.11.2.4 </span>Line styles</h6>
interface is created, the <code title=dom-context-2d-lineDashOffset><a href=#dom-context-2d-linedashoffset>lineDashOffset</a></code>
attribute must initially have the value <code>0.0</code>.</p>

<hr><p>When a user agent is to <dfn id=trace-a-path>trace a <span title=concept-path>path</span></dfn>,
<hr><p>When a user agent is to <dfn id=trace-a-path>trace a <span title=concept-path>path</span></dfn>, <!-- <dfn>trace a path</dfn> -->
given an object <var title="">style</var> that implements the
<code><a href=#canvasdrawingstyles>CanvasDrawingStyles</a></code> interface, it must run the following
algorithm. This algorithm returns a new <a href=#concept-path title=concept-path>path</a>.</p>

<ol><li><p>Let <var title="">path</var> be a copy of the path being
traced.</li>

<!-- PATH SANITIZATION -->

<li><p>Remove from <var title="">path</var> any subpaths containing
no lines (i.e. subpaths with
just one point).</li>
Expand All @@ -34449,138 +34451,148 @@ <h6 id=line-styles><span class=secno>4.8.11.2.4 </span>Line styles</h6>
first line).</p>

<li><p>If the <var title="">styles</var> <a href=#dash-list>dash list</a> is
empty, jump to the step labeled <i>joins</i>.</li>
empty, jump to the step labeled <i>convert</i>.</li>

<li><p>Let <var title="">width</var> be the aggregate length of all
the lines of all the subpaths in <var title="">path</var>, in
coordinate space units.</li>
<!-- DASHING -->

<li><p>Let <var title="">offset</var> be the value of the <var title="">styles</var> <code title=dom-context-2d-lineDashOffset><a href=#dom-context-2d-linedashoffset>lineDashOffset</a></code>, in
coordinate space units.</li>
<li><p>Let <var title="">pattern width</var> be the concatenation of all the entries of the <var title="">styles</var> <a href=#dash-list>dash list</a>, in coordinate space units.</p>

<li>
<li><p>For each subpath <var title="">subpath</var> in <var title="">path</var>, run the
following substeps. These substeps mutate the subpaths in <var title="">path</var> <i>in
vivo</i>.</p>

<p>While <var title="">offset</var> is greater than <var title="">width</var>, decrement it by <var title="">width</var>.</p>
<ol><li><p>Let <var title="">subpath width</var> be the length of all the lines of <var title="">subpath</var>, in coordinate space units.</p>

<p>While <var title="">offset</var> is less than <var title="">width</var>, increment it by <var title="">width</var>.</p>
<li><p>Let <var title="">offset</var> be the value of the <var title="">styles</var> <code title=dom-context-2d-lineDashOffset><a href=#dom-context-2d-linedashoffset>lineDashOffset</a></code>, in
coordinate space units.</li>

</li>
<li>

<p>While <var title="">offset</var> is greater than <var title="">pattern width</var>, decrement it by <var title="">pattern width</var>.</p>

<p>While <var title="">offset</var> is less than <var title="">pattern width</var>, increment it by <var title="">pattern width</var>.</p>

<li><p><i>Offset subpath</i>: If <var title="">offset</var> is
non-zero, add a new subpath at the start of <var title="">path</var> consisting of two points connected by a line
whose length is <var title="">offset</var> coordinate space units.
(This path is temporary and will be removed in the <i>joins</i>
step below. Its purpose is to offset the dash pattern.)</p>
</li>

<li><p>Define <var title="">L</var> to be a linear coordinate line
defined along all lines in all the subpaths in <var title="">path</var>, such that the start of the first line in the
first subpath is defined as coordinate 0, and the end of the last
line in the last subpath is defined as coordinate <var title="">width</var>.</li>
<li><p>Define <var title="">L</var> to be a linear coordinate line
defined along all lines in <var title="">subpath</var>, such that the start of the first line in the
subpath is defined as coordinate 0, and the end of the last
line in the subpath is defined as coordinate <var title="">width</var>.</li>

<li><p>Let <var title="">position</var> be 0.</li>
<li><p>Let <var title="">position</var> be zero minus <var title="">offset</var>.</li>

<li><p>Let <var title="">index</var> be 0.</li>
<li><p>Let <var title="">index</var> be 0.</li>

<li><p>Let <var title="">current state</var> be <i>off</i> (the
other states being <i>on</i> and <i>zero-on</i>).</li>
<li><p>Let <var title="">current state</var> be <i>off</i> (the
other states being <i>on</i> and <i>zero-on</i>).</li>

<li><p><i>Dash On</i>: Let <var title="">segment length</var> be
the value of the <var title="">styles</var> <a href=#dash-list>dash
list</a>'s <var title="">index</var>th entry.</li>
<li><p><i>Dash on</i>: Let <var title="">segment length</var> be
the value of the <var title="">styles</var> <a href=#dash-list>dash
list</a>'s <var title="">index</var>th entry.</li>

<li><p>Increment <var title="">position</var> by <var title="">segment length</var>.</li>
<li><p>Increment <var title="">position</var> by <var title="">segment length</var>.</li>

<li><p>If <var title="">position</var> is greater than <var title="">width</var>, then jump to the step labeled
<i>joins</i>.</li>
<li><p>If <var title="">position</var> is greater than <var title="">subpath width</var>, then end these substeps for this subpath and start them
again for the next subpath; if there are no more subpaths, then jump to the step labeled
<i>convert</i> instead.</li>

<li><p>If <var title="">segment length</var> is non-zero, let <var title="">current state</var> be <i>on</i>.</li>
<li><p>If <var title="">segment length</var> is non-zero, let <var title="">current state</var> be <i>on</i>.</li>

<li><p>Increment <var title="">index</var> by one.</li>
<li><p>Increment <var title="">index</var> by one.</li>

<li><p><i>Dash Off<!-- labeled for consistency only --></i>: Let <var title="">segment length</var> be
the value of the <var title="">styles</var> <a href=#dash-list>dash
list</a>'s <var title="">index</var>th entry.</li>
<li><p><i>Dash off<!-- labeled for consistency only --></i>: Let <var title="">segment length</var> be
the value of the <var title="">styles</var> <a href=#dash-list>dash
list</a>'s <var title="">index</var>th entry.</li>

<li><p>Let <var title="">start</var> be the offset <var title="">position</var> on <var title="">L</var>.</li>
<li><p>Let <var title="">start</var> be the offset <var title="">position</var> on <var title="">L</var>.</li>

<li><p>Increment <var title="">position</var> by <var title="">segment length</var>.</li>
<li><p>Increment <var title="">position</var> by <var title="">segment length</var>.</li>

<li><p>If <var title="">position</var> is greater than <var title="">width</var>, then let <var title="">end</var> be the
offset <var title="">width</var> on <var title="">L</var>.
Otherwise, let <var title="">end</var> be the offset <var title="">position</var> on <var title="">L</var>.</li>
<li><p>If <var title="">position</var> is less than zero, then jump to the step labeled
<i>post-cut</i>.</li> <!-- start and end both before zero -->

<li>
<li><p>If <var title="">start</var> is less than zero, then let <var title="">start</var> be
zero.</li> <!-- end will be (at or) after zero -->

<p>Jump to the first appropriate step:</p>
<li><p>If <var title="">position</var> is greater than <var title="">subpath width</var>, then let <var title="">end</var> be the
offset <var title="">subpath width</var> on <var title="">L</var>.
Otherwise, let <var title="">end</var> be the offset <var title="">position</var> on <var title="">L</var>.</li>

<dl class=switch><dt>If <var title="">segment length</var> is zero and <var title="">current state</var> is <i>off</i></dt>
<li>

<dd>
<p>Jump to the first appropriate step:</p>

<p>Do nothing, just continue to the next step.</p>
<dl class=switch><dt>If <var title="">segment length</var> is zero and <var title="">current state</var> is <i>off</i></dt>

</dd>
<dd>

<p>Do nothing, just continue to the next step.</p>

<dt>If <var title="">current state</var> is <i>off</i></dt>
</dd>

<dd>

<p>Cut the line on which <var title="">end</var> finds itself
short at <var title="">end</var> and place a point there,
cutting the subpath that it was in in two; remove all line
segments, joins, points, and subpaths that are between <var title="">start</var> and <var title="">end</var>; and finally
place a single point at <var title="">start</var> with no lines
connecting to it.</p>
<dt>If <var title="">current state</var> is <i>off</i></dt>

<p>The point has a <i>directionality</i> for the purposes of
drawing line caps (see below). The directionality is the
direction that the original line had at that point (i.e. when
<var title="">L</var> was defined above).</p>
<dd>

</dd>
<p>Cut the line on which <var title="">end</var> finds itself
short at <var title="">end</var> and place a point there,
cutting the subpath that it was in in two; remove all line
segments, joins, points, and subpaths that are between <var title="">start</var> and <var title="">end</var>; and finally
place a single point at <var title="">start</var> with no lines
connecting to it.</p>

<p>The point has a <i>directionality</i> for the purposes of
drawing line caps (see below). The directionality is the
direction that the original line had at that point (i.e. when
<var title="">L</var> was defined above).</p>

<dt>Otherwise</dt>
</dd>

<dd>

<p>Cut the line on which <var title="">start</var> finds itself
into two at <var title="">start</var> and place a point there,
cutting the subpath that it was in in two, and similarly cut the
line on which <var title="">end</var> finds itself short at <var title="">end</var> and place a point there, cutting the subpath
that <em>it</em> was in in two, and then remove all line segments,
joins, points, and subpaths that are between <var title="">start</var> and <var title="">end</var>.</p>
<dt>Otherwise</dt>

<p>If <var title="">start</var> and <var title="">end</var> are
the same point, then this results in just the line being cut in
two and two points being inserted there, with nothing being
removed, unless a join also happens to be at that point, in which
case the join must be removed.</p>
<dd>

</dd>
<p>Cut the line on which <var title="">start</var> finds itself
into two at <var title="">start</var> and place a point there,
cutting the subpath that it was in in two, and similarly cut the
line on which <var title="">end</var> finds itself short at <var title="">end</var> and place a point there, cutting the subpath
that <em>it</em> was in in two, and then remove all line segments,
joins, points, and subpaths that are between <var title="">start</var> and <var title="">end</var>.</p>

</dl></li>
<p>If <var title="">start</var> and <var title="">end</var> are
the same point, then this results in just the line being cut in
two and two points being inserted there, with nothing being
removed, unless a join also happens to be at that point, in which
case the join must be removed.</p>

<li><p>If <var title="">position</var> is greater than <var title="">width</var>, then jump to the step labeled
<i>joins</i>.</li>
</dd>

</dl></li>

<li><p>If <var title="">segment length</var> is greater than zero,
let <var title="">positioned-at-on-dash</var> be false.</li>
<li><p><i>Post-cut</i>: If <var title="">position</var> is greater than <var title="">width</var>, then jump to the step labeled
<i>convert</i>.</li>

<li><p>Increment <var title="">index</var> by one. If it is equal
to the number of entries in the <var title="">styles</var>
<a href=#dash-list>dash list</a>, then let <var title="">index</var> be
0.</li>
<li><p>If <var title="">segment length</var> is greater than zero,
let <var title="">positioned-at-on-dash</var> be false.</li>

<li><p>Return to the step labeled <i>dash on</i>.</li>
<li><p>Increment <var title="">index</var> by one. If it is equal
to the number of entries in the <var title="">styles</var>
<a href=#dash-list>dash list</a>, then let <var title="">index</var> be
0.</li>

<li><p><i>Joins</i>: Remove from <var title="">path</var> any
subpath that originally formed part of the subpath added in the
<i>offset subpath</i> step above.</li>
<li><p>Return to the step labeled <i>dash on</i>.</li>

</ol></li>

<!-- STROKING -->

<li>

<p><i>Convert</i>: This is the step that converts the path to a new path that represents its
stroke.</p>

<p>Create a new <a href=#concept-path title=concept-path>path</a> that
describes the edge of the areas that would be covered if a straight line of length equal to the
<var title="">styles</var> <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code> was swept
Expand Down

0 comments on commit 59b4599

Please sign in to comment.