Quadratic bezier ~ q ~ A Continuation of Path. Unlike the Elliptical Arc the Qb`s curves are concentrated more to the ends. Depending on command given. As in all Path Functions The first Command Must Start with an Absolute/upper case M ( Capital M in other words ). The M is your moveto: command. It tells how far over and how far down from the North west Corner . (left side ). This is your starting point of your draw. Example M30 30 ~ the example command would move your Starting Draw point over 30 pixels from the North West and 30 pixels Down.. The lower case m may be used afterwards . It moves the draw lines over are back from your ending point of your last command .. Qb only requires One additional set after the moveto Command... But you can use as many as you like. You can only USE the relative/lowercase q I will now explain what each number does in the q command. The starting Letter After the moveto: is the q q plus a number will equal 1/2 the width of your curve. The curve attomatically goes to the right Unless you add a minus (q-?) The 2nd. number is the Dept or Height of the Curve. The curve will go downwards UNLESS you add a minus to it. (-?) then it will go upwards. The 3rd. number in the set will move the Ending Point of your draw over to the right. Are will take it to the left with a minus.(-?) The 4th. number takes the ending point downwards.Are again a minus with a number will take it up.(-?) When drawing it`s aways Best to use only the stroke color first. Then if you wish use fill color. The fill color sometimes gives Weird results . Sometimes Cool results. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 320x320 bg Coordinates for the example above. White M0 30 is zero over from the left And 30 pixels down. The x shows the Starting point on the example. q30 is the width of your curve. So in this case it would be 15 . + sign shown on example. The 2nd. number is 0 the dept or height of the curve. It automaticly goes down Unless you use a minus before the number .. then it will go up. We used 0 so it defaulted The 3rd. number is 0 .. If we had used a number there other than the zero it would have taken the ending point over are back exactly that ammount. And the 4th./last number is 30. This takes the ending point down 30 pixels. ~ down from your starting point. The red curve has the same coordinates as the white Except with a q60 instead of q30. And the blue is q320. The Black bg is 320x320.(320 pixels wide & 320 pixels high). So again it shows only half of that for the width of the curve. To go all the way over it would be q640. Example #2 ~ 320x320 black bg. In example #2 above the white curve shows the curve going in the opposite direction. M30 30 q-30 0 0 30. The Red curve example shows one of the 2 ways of putting 2 opposites together. M70 30 q-30 0 0 30 M70 30 q30 0 0 30 These were done by using the upper case M moving it over & down from the N.W. (left side. The blue shows how to move it with the lower case m M120 30 q-30 0 0 30 m0 -30 q30 0 0 30 The lower case m moved it 0 over from ending point ( Not from the N.W. corner.)and the -30 brought it back up to the original starting point. The gray was M170 60 q-30 0 0 -30 M170 60 q30 0 0 -30 I lowered it to 60 so i could draw upwards 30 instead of downwards so it would be located evenly with the others on the example.. 320x320 bg On example 3 The white shows putting to curves together with out a moveto: command. Without the moveto command your curves will continue on from the end of your previous command . Also i added Dept to them . This works the same way as i explained earlier with the width. White coordinates: M150 70 q-200 -130 0 90 q-200 0 90 The Red curves coordinates: i drew just the opposite with even more dept to them. M150 70 q200 -160 0 90 q200 250 0 90 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Below is another example of the continuation with one moveto: to put the opposites together. The left side using the minus , the right side without. Coordinates: M100 20 q-20 0 0 10 q-21 0 -5 12 q-22 0 -5 14 q-23 0 -5 16 q-24 0 -5 18 q-25 0 -5 20 M100 20 q20 0 0 10 q21 0 5 12 q22 0 5 14 q23 0 5 16 q24 0 5 18 q25 0 5 20 q0 1 -50 0 The q0 1 -50 0 is the bottom line. 225x140 bg.
M0 30 q30 0 0 30
Remember it`s actually only half of the number choosen .
160 pixels over.
