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

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);
 }

Draw wavy line (sinewave?) on inkcanvas

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

Draw wavy line (sinewave?) on inkcanvas

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

Existing Members

...or Join us