Discussing the article: "Creating a Cairo-Inspired Graphics Library for MetaTrader 5 (Part 7): Arcs, Circles and Rounded Rectangles"
You are missing trading opportunities:
- Free trading apps
- Over 8,000 signals for copying
- Economic news for exploring financial markets
Registration
Log in
You agree to website policy and terms of use
If you do not have an account, please register
Check out the new article: Creating a Cairo-Inspired Graphics Library for MetaTrader 5 (Part 7): Arcs, Circles and Rounded Rectangles.
The cubic Bezier, which Part 6 gave the library, is the general tool: with enough curves you can describe any smooth outline that exists. What it did not give the library is the shapes an interface is actually made of.
Look at any dashboard — trading or otherwise — and count what is really on it. Cards with rounded corners. Tabs rounded on top only. Pills. Buttons. Progress tracks. Circular gauges. Badges. Chat bubbles. Toggle switches. Almost none of that is a general curve; nearly all of it is an arc, or a rectangle with arcs in the corners.
You can approximate a circular arc with a Bezier. Everyone does, and there is a famous magic constant — 0.5523 — for the control point offset that makes a quarter circle come out nearly right. "Nearly" is the operative word: it is an approximation, it has a real error, and you have to remember the number.
We are not going to do that, because for a circular arc we can do something better. Both routes end in an approximation — the arc is drawn as straight chords either way — but a Bezier adds an error of its own before the chords are even cut, and a general Bezier has no simple formula for the required segment count. A circle does. The segment count follows directly from the geometry, in one line of trigonometry: the formula gives the exact largest angle one chord may span, and rounding the count up gives the fewest segments that stay inside the tolerance. Two guards and a visual floor, described below, override that count at the extremes. Part 6's recursion was the right answer to a hard question; today the question is easy, so the answer should be too.
Next, we build rounded rectangles with an independent radius per corner. This single function covers cards, tabs, pills, chat bubbles, badges, and segmented controls, and it is the most-used function in the library by a wide margin.
After this article the geometry layer is finished. Everything after it is about color.
Author: Sandro Begashvili