16,016,134 members

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:

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

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

Permalink

Share this answer

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

--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

thx

Espen Harlinn
18-Mar-11 5:18am

Right, my 5!

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

Xaml..

code..

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

---------------------

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

Permalink

Share this answer

v3

Comments

capricorner
17-Mar-11 7:48am

Thank you Guys for your help...appreciate! But how to get the sinewave to where ever i have drawn with the ink...do i have to pass some collected styluspoints to a sinefuncion? (sinewave follows the path of ink)

cheers

cheers

Albin Abel
17-Mar-11 13:14pm

I have added additional codes to my improved answer. Try testing this in a canvas where no prior transformation effected. May be helpful

capricorner
17-Mar-11 17:45pm

thx AlbinAbel...could'nt get it to work as i thought.

I've tried it with custom rendering ink as well...no luck. here the link:

http://msdn.microsoft.com/en-us/library/ms747347.aspx

so at the end i will "replace" the ink-line with a wavy-line

I will try again...& let you know

I've tried it with custom rendering ink as well...no luck. here the link:

http://msdn.microsoft.com/en-us/library/ms747347.aspx

so at the end i will "replace" the ink-line with a wavy-line

I will try again...& let you know

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

Well explained! have a 5!

Albin Abel
17-Mar-11 14:24pm

Thanks Tarun.K.S. Let us see is it helpful for capricorner

capricorner
21-Mar-11 17:03pm

it was very helpful for understanding the relation betw. Xaml and code...but i'm not able to draw that waved line on inkcanvas. Wavy line should exactly be where the Origin line was before.

If someone could help me out pls. ?...(if it's not too difficult as mentioned :-))

thx

If someone could help me out pls. ?...(if it's not too difficult as mentioned :-))

thx

Sergey Alexandrovich Kryukov
18-Mar-11 15:24pm

Very good, a 5.

I don't understand what OP confusion is about. Maybe you can...

--SA

I don't understand what OP confusion is about. Maybe you can...

--SA

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

CodeProject,
20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8
+1 (416) 849-8900