Hello,
one of my apps draws many vector graphics. The graphics can be scaled and printed onto different paper sizes. When I draw pie charts, then the lines which go from the center of the circle to the circle sometimes overlap the circle. The end of the lines is then outside the circle (mostly at the right and bottom of the circle). This looks very bad when printed to paper or when printed to PDF. To see the effect run the project (https://cmezes.com/dl/PieChart.zip), play around until you see some lines end outside the circle, print to PDF, open the PDF and zoom in.
Is there a way to improve the graphics so the lines end exactly on the cicle?
Is it when you zoom that your trouble appears ?
No, the trouble appears at run.
Wild guess: are you accounting for the width of the line itself when calculating the length of your line?
I confirm that: part of the lines goes to the right part (stop at or in the circle line); only some goes outside of it by some points.
I’m not sure why but shifting the circle over 1 and making it 1 wider gets it to align on the spokes
c.Width = graphHeight + 1
c.Height = graphHeight + 1
c.x = centerX + 1
c.y = centerY + 1
same for the arc fill to align
ac.Width = graphHeight + 1
ac.Height = graphHeight + 1
ac.X = centerX + 1
ac.Y = centerY + 1
Integer variables vs Double ?
There’s something weird happening with BorderWidth. It’s typed as a double but only renders integer widths. The spacing around the line coordinates toggles with the even/oddness of the width and the line cap is ‘Butt’, just a flat edge. But something different happens when BorderWidth is 1, the line cap is now round and the coordinates have shifted right and down 1 relative to the thicker widths.
This code put in Christians Paint event shows some of this. 10 identical coordinate lines are drawn with different widths and colors. Although to see the jump up and down of the width requires adding the +(9-i).
dim l As CurveShape
for i As integer = 9 downto 1
l = new CurveShape
l.BorderWidth = i
l.Border = 100
l.X = 40 +(9-i) //comment +(9-i) to not shift line starts
l.Y = 40
l.X2 = 140
l.Y2 = 40
l.BorderColor = rgb( 255*(i mod 2), 128*(i mod 3), 85*(i mod 4) )
g2d.Append(l)
next
Without the +(9-i) shift all the lines start at the same left edge except the last width 1 line.
I’m getting the impression if line widths are greater than 1 then coordinates are clamped to integers, but if line width is 1 coordinates are floats and shifted right and down 1.
[quote=280889:@Will Shank]I’m not sure why but shifting the circle over 1 and making it 1 wider gets it to align on the spokes
c.Width = graphHeight + 1
c.Height = graphHeight + 1
c.x = centerX + 1
c.y = centerY + 1
same for the arc fill to align
ac.Width = graphHeight + 1
ac.Height = graphHeight + 1
ac.X = centerX + 1
ac.Y = centerY + 1[/quote]
Thanks. I already tried similar solutions. The problem is, that in most cases this solves the problem but in some cases not. And sometimes new problems appear (for example one separator line does not lie exactly on the edge of the arcshape and a small white gap appears). The problem is more visible in the real app, the demo project is a simplified example.
Sounds interesting, I will take a look at it. But why have most of the lines the correct lenght while others have not?
[quote=280907:@Will Shank]
I’m getting the impression if line widths are greater than 1 then coordinates are clamped to integers, but if line width is 1 coordinates are floats and shifted right and down 1.[/quote]
I see… This is very confusing.
Yes, it’s idiosyncratic. To have things line up perfectly will require mapping out all these little wiggles and then how to account for them.
If you’re targeting only Mac it might be easier to draw with CGContext (declares) which has a precise definition of how it renders. I have such code to get you going if interested. (actually if you need text or super picky about color then it’s not so easy).
[quote=280925:@Will Shank]
If you’re targeting only Mac it might be easier to draw with CGContext (declares) which has a precise definition of how it renders. I have such code to get you going if interested. (actually if you need text or super picky about color then it’s not so easy).[/quote]
Thanks for your offer Will. At the moment I’m targeting only Mac but I plan to target Windows too. So I hope to find a work-around for my problem (with no platform specific code) or at least use a solution which works in most cases (like the example in your post above). Thankfully I have vacations next week, so there will be enough time to tinker with Xojo.