It has been few months since I started playing around with Oxyplot, and it continues to impresses me. Having said that, there are times when certain challenges are thrown showing light on certain limitation of the tool. One of such limitation and a way to overcome is being discussed in this blog post.
Oxyplot supports a wide range of Annotations including Rectangle Annotation, Text Annotation, Image Annotation, Ellipse Annotation and Line Annotation among others. These by itself are extremely powerful and easy to use. However, recently I came across a business need where I would need to draw a Rectangle Annotation with Rounded Corner.
The Oxyplot library doesn’t allow us an in-build mechanism to do it. However, the good part is, that is not end of the road. We can create our own custom annotation. Before we hit code, it would be a good idea to discuss how we plan to create a RoundedCornerRectangleAnnotation.
The crux of the idea is to generate the rounded effect by drawing a set of two rectangle and 4 circle/ellipse. The Radius of the circles would be the intended corner radius of the final rectangle.
Okay, that’s enough for idea, let’s go ahead and write some code.
Part of Custom Annotation Class
private void DrawRoundedRectangle(IRenderContext rc)
{
var xMin = double.IsNaN(this.MinimumX) || this.MinimumX.Equals(double.MinValue)
? this.ClipByXAxis
? this.XAxis.ActualMinimum
: this.XAxis.InverseTransform(this.PlotModel.PlotArea.Left)
: this.MinimumX;
var xMax = double.IsNaN(this.MaximumX) || this.MaximumX.Equals(double.MaxValue)
? this.ClipByXAxis
? this.XAxis.ActualMaximum
: this.XAxis.InverseTransform(this.PlotModel.PlotArea.Right)
: this.MaximumX;
var yMin = double.IsNaN(this.MinimumY) || this.MinimumY.Equals(double.MinValue)
? this.ClipByYAxis
? this.YAxis.ActualMinimum
: this.YAxis.InverseTransform(this.PlotModel.PlotArea.Bottom)
: this.MinimumY;
var yMax = double.IsNaN(this.MaximumY) || this.MaximumY.Equals(double.MaxValue)
? this.ClipByYAxis
? this.YAxis.ActualMaximum
: this.YAxis.InverseTransform(this.PlotModel.PlotArea.Top)
: this.MaximumY;
var xCornerRadius = (CornerRadius / (XAxis.Maximum - XAxis.Minimum)) * 100;
var yCornerRadius = (CornerRadius / (YAxis.Maximum - YAxis.Minimum)) * 100;
this.screenRectangleWithClippedXAxis = new OxyRect(this.Transform(xMin + xCornerRadius, yMin), this.Transform(xMax - xCornerRadius, yMax));
this.screenRectangleWithClippedYAxis = new OxyRect(this.Transform(xMin, yMin + yCornerRadius), this.Transform(xMax, yMax - yCornerRadius));
this.screenEllipseLeftBottom = new OxyRect(this.Transform(xMin, yMin), this.Transform(xMin + 2* xCornerRadius, yMin + 2* yCornerRadius));
this.screenEllipseLeftTop = new OxyRect(this.Transform(xMin, yMax), this.Transform(xMin + 2 * xCornerRadius, yMax - 2 * yCornerRadius));
this.screenEllipseRightBottom = new OxyRect(this.Transform(xMax, yMin), this.Transform(xMax - 2 * xCornerRadius, yMin + 2 * yCornerRadius));
this.screenEllipseRightTop = new OxyRect(this.Transform(xMax, yMax), this.Transform(xMax - 2 * xCornerRadius, yMax - 2 * yCornerRadius));
// clip to the area defined by the axes
var clippingRectangle = OxyRect.Create(
this.ClipByXAxis ? this.XAxis.ScreenMin.X : this.PlotModel.PlotArea.Left,
this.ClipByYAxis ? this.YAxis.ScreenMin.Y : this.PlotModel.PlotArea.Top,
this.ClipByXAxis ? this.XAxis.ScreenMax.X : this.PlotModel.PlotArea.Right,
this.ClipByYAxis ? this.YAxis.ScreenMax.Y : this.PlotModel.PlotArea.Bottom);
rc.DrawClippedRectangle(clippingRectangle,this.screenRectangleWithClippedXAxis,
this.GetSelectableFillColor(this.Fill),
this.GetSelectableColor(this.Stroke),
this.StrokeThickness);
rc.DrawClippedRectangle(clippingRectangle, this.screenRectangleWithClippedYAxis,
this.GetSelectableFillColor(this.Fill),
this.GetSelectableColor(this.Stroke),
this.StrokeThickness);
rc.DrawClippedEllipse(clippingRectangle, screenEllipseLeftBottom,
this.GetSelectableFillColor(this.Fill),
this.GetSelectableColor(this.Stroke),
this.StrokeThickness);
rc.DrawClippedEllipse(clippingRectangle, screenEllipseLeftTop,
this.GetSelectableFillColor(this.Fill),
this.GetSelectableColor(this.Stroke),
this.StrokeThickness);
rc.DrawClippedEllipse(clippingRectangle, screenEllipseRightBottom,
this.GetSelectableFillColor(this.Fill),
this.GetSelectableColor(this.Stroke),
this.StrokeThickness);
rc.DrawClippedEllipse(clippingRectangle, screenEllipseRightTop,
this.GetSelectableFillColor(this.Fill),
this.GetSelectableColor(this.Stroke),
this.StrokeThickness);
if (!string.IsNullOrEmpty(this.Text))
{
var textPosition = this.GetActualTextPosition(() => this.screenRectangle.Center);
rc.DrawClippedText(
clippingRectangle,
textPosition,
this.Text,
this.ActualTextColor,
this.ActualFont,
this.ActualFontSize,
this.ActualFontWeight,
this.TextRotation,
HorizontalAlignment.Center,
VerticalAlignment.Middle);
}
}
You can find the complete class code in Gist Link. The complete source code, including the WPF Wrapper can be found in the forked implementation at my GitHub.
PS:The implementation, of course has its own flaws. You cannot set Stroke for the Rounded Rectangle, hopefully, I would be able to workaround this issue soon.
ByteLanguage.Net 