Best way to stroke a path with TWO colors?
-
First the main issue: I have a Path that I create at runtime and show it on a custom control. This part works perfect. The visual tree is simple: Control -Line -Control --Grid ---Path UseLayoutRound=True, SnapToDevicePixels=True. Line is a 1 pixel tall horizontal line and the user can customize the vertical position. I need to stroke the path in two different colors. One color for above the line and one color for below the line. Typical solution I see is to use a 2 color brush. However, as you might suspect, it is *EXTREMELY CRITICAL* visually that the color change happen *EXACTLY* on the horizontal line. +/- 1 pixel is not acceptable. The problem I'm having seems to be to align the color change on the line 100% of the time. For example, if my control is 99 pixels high and the threshold is at 50%, I should have 49 + 1 + 49. I have tried the following solutions… problems I encountered are listed as well. Any way to get this working perfectly 100% of the time? 1) Vertical LinearGradientBrush Generally works and hits the line 100% of the time, but it doesn’t give me a hard break between the two colors, so for example black going into white will leave a gray line 2a) DrawingBrush with RectangleGeometries 2b) DrawingBrush with DrawingContext Both of these ideas have the same problem. I can’t hit the line 100% of the time (round off errors I’m guessing…) but I’m using the same math as with #1, so… I can get a hard color change with both these, but I get +/- 1 pixel off errors…
-
First the main issue: I have a Path that I create at runtime and show it on a custom control. This part works perfect. The visual tree is simple: Control -Line -Control --Grid ---Path UseLayoutRound=True, SnapToDevicePixels=True. Line is a 1 pixel tall horizontal line and the user can customize the vertical position. I need to stroke the path in two different colors. One color for above the line and one color for below the line. Typical solution I see is to use a 2 color brush. However, as you might suspect, it is *EXTREMELY CRITICAL* visually that the color change happen *EXACTLY* on the horizontal line. +/- 1 pixel is not acceptable. The problem I'm having seems to be to align the color change on the line 100% of the time. For example, if my control is 99 pixels high and the threshold is at 50%, I should have 49 + 1 + 49. I have tried the following solutions… problems I encountered are listed as well. Any way to get this working perfectly 100% of the time? 1) Vertical LinearGradientBrush Generally works and hits the line 100% of the time, but it doesn’t give me a hard break between the two colors, so for example black going into white will leave a gray line 2a) DrawingBrush with RectangleGeometries 2b) DrawingBrush with DrawingContext Both of these ideas have the same problem. I can’t hit the line 100% of the time (round off errors I’m guessing…) but I’m using the same math as with #1, so… I can get a hard color change with both these, but I get +/- 1 pixel off errors…
My first thought would be to draw the line twice. Once as a TWO pixel tall line in one color, then again as a ONE pixel tall line in the other color, overwriting half of the line. I don't know how accurately this would work...
A positive attitude may not solve every problem, but it will annoy enough people to be worth the effort.
-
My first thought would be to draw the line twice. Once as a TWO pixel tall line in one color, then again as a ONE pixel tall line in the other color, overwriting half of the line. I don't know how accurately this would work...
A positive attitude may not solve every problem, but it will annoy enough people to be worth the effort.
The problem seems to be that DrawingBrush has round-off errors internally or it doesn't work the same way as the LinearGradientBrush in terms of origin / relative ratios. Like I said, LinearGradientBrush hits the line consistently with my "math". DrawingBrush isn't even consistent at 50% which should not even be suspectible to round-off errors since its a whole pixel. Sometimes its 1 pixel too high, sometimes its 1 pixel too low. Also tried TransformToVisual to go from the line to the path, but TransformToVisual considers both shapes to be the same height (as the height of the control), so it just maps the points 1 to 1. Tried Math.Round() and Math.Ceiling(), etc. LOL. The line itself certainly doesn't move around, its always at the exact correct location. Tried get the rendered bounds of the path and calculating it from that, but same thing... +/- 1 issues. Also tried setting everything to absolute mode and setting the rectangles identically, nope... Maybe the LinearGradientBrush only *appears* to be working and is hiding the +/- 1 issues with the gradiented color switch.