Search code examples
wpfcurvetrigonometry

WPF path description for a sine curve using bezier curves


I need to draw a sine curve (from x = 0 to 2pi) as part of a DrawingVisual and would like to use WPF's basic path capabilities to get a smooth curve. Probably I need some sort of bezier curve for that. Unfortunately I don't even know how they work. (Just that they can "pull" the line towards a control point somehow.)

Can somebody tell me what coordinates I should use to make it look right?

I could apply a ScaleTransform if I want to stretch it a little, so the normal form would be fine.

A thread in the MSDN forums just brought me in the middle of a formula mess in Wikipedia's scientific depths. I haven't studied maths so that's not much use to me.


Solution

  • Nevermind, I played a while with Kaxaml and found this pretty neat. It's probably a bit stretched already, but it makes the plot more recognisable.

    <Page
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
      <Grid>  
        <Path Data="M0,100 L50,0 L50,200 L100,100" Stroke="Gray" StrokeThickness="0.5"/>
        <Path Data="M0,100 C50,0  50,200  100,100" Stroke="Red" StrokeThickness="3"/>
      </Grid>
    </Page>
    

    The first Path (grey) shows the control points used and how they are on the same horizontal offset; the second Path (red, bold) shows the final bezier curve.

    This is how it looks like:

    enter image description here