Double Cubic Bezier Curves

   



Double Reflected Cubic Bezier Curves

Consider the double reflected cubic Bezier curves rendered in Figure 5.7.

click to expand
Figure 5.7: A double cubic Bezier curve.

The SVG document doubleReflectedCubicBezier1.svg in Listing 5.7 demonstrates how to render a double reflected cubic Bezier curve.

Listing 5.7 doubleReflectedCubicBezier1.svg

start example
 <?xml version="1.0" encoding="iso-8859-1"?>  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"  "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd"> <svg width="100%" height="100%"> <g transform="translate(45,45)"> <path    d="m20,20 C20,50 20,450 300,200 s-150,-250 200,100"    fill="blue"    stroke-dasharray="2 2 2 2"    style="stroke:#880088;stroke-width:4;"/> </g> <g transform="translate(35,35)"> <path    d="m20,20 C20,50 20,450 300,200 s-150,-250 200,100"    fill="white"    stroke-dasharray="8 4 8 4"    style="stroke:#880088;stroke-width:4;"/> </g> <g transform="translate(30,30)"> <path    d="m20,20 C20,50 20,450 300,200 s-150,-250 200,100"    fill="blue"    stroke-dasharray="2 2 2 2"    style="stroke:#880088;stroke-width:4;"/> </g> <g transform="translate(20,20)"> <path    d="m20,20 C20,50 20,450 300,200 s-150,-250 200,100"    fill="red"    stroke-dasharray="8 4 8 4"    style="stroke:black;stroke-width:4;"/> </g> </svg> Remarks 
end example

The code in Listing 5.7 contains four cubic Bezier curves that create a reflection based on the s command such as the one listed below:

s-150,-350 200,200"

The s command has two control points. The first control point is (-150,-350), and the second control point is determined as follows:

  1. determine the current point, which is (400,200)

  2. determine the second control point of the 'C' command: (20,450)

  3. reflect the point (20,450) through the point (400,200)

As you can see, the reflected cubic Bezier curve in this example produces an interesting graphics image; however, understanding how to specify such a curve does requires more effort than the previous examples of Bezier curves.



   



Fundamentals of SVG Programming. Concepts to Source Code
Fundamentals of SVG Programming: Concepts to Source Code (Graphics Series)
ISBN: 1584502983
EAN: 2147483647
Year: 2003
Pages: 362

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net