Draw wavy line (sinewave?) on inkcanvas

Question

4.00/5 (1 vote)

See more:

Hi all,

i'm looking for a solution on how to draw a wavy line on inkcanvas. So whenever i draw something on inkcanvas, it should be rendered to a wavy line. I found a way on how to do it in Winforms using sineFunction (but only for straight Lines!). I pass the start and end point to the function and draw it on the form.
Exmpl. code of drawing curve:

<pre lang="vb">
Dim t As Graphics = CreateGraphics()
t.DrawCurve(p, sine(A, B)) ' A,B start and endpoints
Public Function sine(ByVal start As Point, ByVal ende As Point) As Point()
        Dim sidea As Integer = ende.X - start.X
        Dim sideb As Integer = ende.Y - start.Y
        Dim hypot As Double = CSng(Sqrt((sidea ^ 2) + (sideb ^ 2)))
        Dim angle As Double = CSng(Atan2(sideb, sidea))
        Dim points As Point() = New Point(10) {}
        Dim c As Integer = 0, n As Integer = 10
        While c <= 10
            points(c) = New Point(CInt(hypot / 10 * c), n)
            n = -n
            c += 1
        End While
        Dim mx As New Drawing2D.Matrix()
        mx.Rotate(CSng(angle / Math.PI * 180))
        mx.Translate(A.X, A.Y, Drawing2D.MatrixOrder.Append)
        mx.TransformPoints(points)
        Return (points)
    End Function

I'v found ways for a dynamic renderer to draw ellips, rects and so on, but not for wavy line.

thx in advance for any help

Posted 16-Mar-11 23:29pm

capricorner

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Abhinav S · Accepted Answer · 2011-03-16T23:34:00

Solution 1

This[^] should surely help you out.

Posted 16-Mar-11 23:34pm

Abhinav S

Comments

Albin Abel 17-Mar-11 5:59am

Good link

Abhinav S 17-Mar-11 6:02am

Thanks.

Tarun.K.S 17-Mar-11 13:55pm

Yup good link!

Sergey Alexandrovich Kryukov 17-Mar-11 16:14pm

The problem is not too difficult, this article should be enough, my 5.
--SA

capricorner 18-Mar-11 9:05am

First of all, thx all of you guys. Tried again using stroke.StylusPoints to pass each styluspoint collected to the Sine-Funcion...no luck. It works for a straight horizontal line, but if i draw from top Right to bottom left the sinewave appears far away from my origin line. I'm not a Professional Programmer, i wanna draw an application where users can draw on a InkCanvas with different Strokepattern. The wavy line should also be possible on a curve itself.
thx

Espen Harlinn 18-Mar-11 5:18am

Right, my 5!

Albin Abel · Accepted Answer · 2011-03-17T00:11:00

Abhinav's link is good. However the simplified version of that solution is...

Xaml..

XML

<Polyline Name="polyline1" Stroke="Red"
StrokeThickness="2"/>

code..

C#

for (int i = 0; i < 70; i++)
{
double x = i * Math.PI;
double y = 40 + 30 * Math.Sin(x/10);
polyline1.Points.Add(new Point(x, y));
}

Where the 40 is simply a translation factor for the graphic. 30 is the amplitude. This is just to explain how a sinusoidal formed using trig instead of you just copy cat the code.

Improved Answer
---------------------

C#

If need to draw a wavy polyline on a canvas using a start and end point then this function may help

        public void drawWawyPolyline(Point start, Point end)
        {
            double x=0;
            double y=0;
            double distance = Math.Sqrt(Math.Pow((start.X - end.X), 2) + Math.Pow((start.Y - end.Y), 2));
            Point refPoint = new Point(start.X + distance, start.Y);
            double endX = (refPoint.X / Math.PI) + 1;

            double angle1 = rad2deg(Math.Acos(Math.Abs((end.X - start.X)) / distance));
            double angle2 = rad2deg(Math.Asin(Math.Abs((end.Y - start.Y)) / distance));
            double angle = (angle1 + angle2) / 2;
           
            for (double startX = start.X / Math.PI; startX <= endX; startX++)
            {
               x = startX * Math.PI;
               y = start.Y + 10 * Math.Sin(x / 10);
                polyline1.Points.Add(new Point(x, y));
            }
            RotateTransform trans = new RotateTransform(angle, start.X, start.Y);
            polyline1.RenderTransform = trans;

        }

C#

private double deg2rad(double deg)
 {
     return Math.PI * deg / 180;
 }
 private double rad2deg(double rad)
 {
     return rad * (180 / Math.PI);
 }