Add an Catmull-Rom curve path data command.
authorCameron McCormack <cam@mcc.id.au>
Fri, 22 Aug 2014 07:05:40 +1000
changeset 694 100a7b69c1e3
parent 693 3de9c9316033
child 695 8dac471c2f5a
Add an Catmull-Rom curve path data command.
master/changes.html
master/paths.html
master/style/default_svg.css
--- a/master/changes.html	Fri Aug 22 00:03:45 2014 +1000
+++ b/master/changes.html	Fri Aug 22 07:05:40 2014 +1000
@@ -170,6 +170,8 @@
   <li>Added new <strong>B</strong> and
   <strong>b</strong> "bearing" path commands.</li>
 
+  <li>Added new <strong>R</strong> and <strong>r</strong> Catmull-Rom curve commands.</li>
+
   <li class='added-since-last-wd'>Define <a>'path'</a>, <a>'polygon'</a> and <a>'polyline'</a> elements with no data set (empty or zero valid commands) to not render.</li>
 
   <li class='added-since-last-wd'>Define how <a href="paths.html#__svg__SVGPathElement__getPathSegAtLength">getPathSegAtLength</a> and 
--- a/master/paths.html	Fri Aug 22 00:03:45 2014 +1000
+++ b/master/paths.html	Fri Aug 22 07:05:40 2014 +1000
@@ -794,6 +794,71 @@
 implementation notes</a> for detailed implementation notes for
 the path data elliptical arc commands.</p>
 
+<h3 id="PathDataCatmullRomCommand">The Catmull-Rom curve commands</h3>
+
+<p>The Catmull-Rom curve commands (<strong>R</strong> or <strong>r</strong>)
+specify control points for a Catmull-Rom curve.  The Catmull-Rom curve
+commands are:</p>
+
+<table class="PathDataTable">
+  <tr>
+    <th>Command</th>
+    <th>Name</th>
+    <th>Parameters</th>
+    <th>Description</th>
+  </tr>
+  <tr>
+    <td><strong>R</strong> (absolute)<br/>
+      <strong>r</strong> (relative)</td>
+    <td>Catmull-Rom</td>
+    <td>x1 y1 x2 y2 (x y)+</td>
+    <td><p>Draws a Catmull-Rom curve using the specified points as its
+    control points.  The curve is drawn starting from (x1, y1),
+    passing through each subsequent point, before stopping at
+    the second-last point given.  The current point preceding the command
+    provides the first control point of the curve and controls its tangent
+    coming out of (x1, y1).  The final point of the command
+    provides the final control point and controls the tangent
+    of the curve coming in to the second-last point.
+    <strong>R</strong> (uppercase) indicates that absolute coordinates
+    will follows; <strong>r</strong> (lowercase) indicates that
+    relative coordinates will follow.</p>
+    <p>The current point after drawing the Catmull-Rom curve
+    is left at the second-last point of the command, i.e. the point
+    at which the curve ends visually.</p></td>
+  </tr>
+</table>
+
+<p>When a relative <strong>r</strong>
+command is used, each of the relative coordinate pairs
+is computed as for those in an <strong>m</strong> command.
+For example, the second control point of the curve – the first
+listed in the command – is (<var>cpx</var> + <var>x1</var> cos <var>cb</var>
++ <var>y1</var> sin <var>cb</var>, <var>cpy</var> +
+<var>x1</var> sin <var>cb</var> + <var>y1</var> cos <var>cb</var>).</p>
+
+<p class="issue">Should we broaden this and allow for a tension parameter
+to be specified, and thus be cardinal spline rather than a Catmull-Rom spline?</p>
+
+<p class="issue">Should we allow for fewer than three coordinate pair arguments
+to the command and try to do something sensible with them, rather than causing
+the path data to become invalid?</p>
+
+<p class="issue">Is it a problem that the command will move then pen from the current
+position to (x1, y1) without drawing anything?  If so, should we made the
+first control point explicit in the command rather than implicitly taken
+from the current position?  That would then mirror the behavior written
+above for how the current position is left at the second-last control
+point.</p>
+
+<p class="issue">Where should we link to for a definition of Catmull-Rom
+curves so that we don't have to redefine them here?</p>
+
+<p class="issue">We should clarify what it means to have two consecutive
+<strong>R</strong> or <strong>r</strong> commands.</p>
+
+<p class="issue">We should add an example.</p>
+
 <div class="ready-for-wider-review">
 
 <h3 id="PathDataBearingCommands">The bearing commands</h3>
@@ -905,6 +970,7 @@
     | smooth-curveto
     | quadratic-bezier-curveto
     | smooth-quadratic-bezier-curveto
+    | catmull-rom
     | elliptical-arc
     | bearing
 moveto:
@@ -964,8 +1030,12 @@
 elliptical-arc-argument:
     number <a>comma-wsp</a>? number <a>comma-wsp</a>? 
         number <a>comma-wsp</a> flag <a>comma-wsp</a>? flag <a>comma-wsp</a>? coordinate-pair
+catmull-rom:
+    ( "R" | "r" ) <a>wsp</a>* catmull-rom-argument-sequence
+catmull-rom-argument-sequence:
+    coordinate-pair coordinate-pair coordinate-pair+
 bearing:
-    ( "B" | "b") <a>wsp</a>* bearing-argument-sequence
+    ( "B" | "b" ) <a>wsp</a>* bearing-argument-sequence
 bearing-argument-sequence:
     number
     | number <a>comma-wsp</a>? bearing-argument-sequence
--- a/master/style/default_svg.css	Fri Aug 22 00:03:45 2014 +1000
+++ b/master/style/default_svg.css	Fri Aug 22 07:05:40 2014 +1000
@@ -350,6 +350,7 @@
 table.PathDataTable { border-spacing: 2px; border-style: outset; border-width: 1px }
 table.PathDataTable td,
 table.PathDataTable th { padding: 5px; border-style: inset; border-width: 1px }
+table.PathDataTable td > p:first-child { margin-top: 0; }
 
 .colorpatch { width: 14px; height: 14px; border: 1px solid black; }
 
@@ -478,4 +479,4 @@
   font-size: 83%;
 }
 
-.heading > a.self-link::before { content: "§"; }
\ No newline at end of file
+.heading > a.self-link::before { content: "§"; }