|
|
Consider the double reflected cubic Bezier curves rendered in Figure 5.7.
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
<?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
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:
determine the current point, which is (400,200)
determine the second control point of the 'C' command: (20,450)
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.
|
|