0

I'm looking in on how to draw a looping shape in WPF from codebehind.

I know I can draw ellipses and draw a line, but I can't find anywhere how to modify them to get this looping shape.

Perhaps I'm not using the correct word for this type of drawing... but also found some words such as clothoids but not sure if this is exactly what I'm looking for...

Any tips are welcome. Thank you !

enter image description here

user1841243
  • 1,663
  • 2
  • 19
  • 35
  • Are you asking how to draw a spring with a certain number of turns given 2 points? – shadow32 Jun 15 '18 at 14:36
  • 2
    Maybe you can use the [Bezier curves](https://stackoverflow.com/a/13948059/2846483) for that. – dymanoid Jun 15 '18 at 14:38
  • Vector or Raster? – 580 Jun 15 '18 at 14:39
  • 1
    I used unicode character Latin Small Case Letter "Rams Horn: (char 0x0264) and go this : ɤɤɤɤ. then rotated 180 degrees. – jdweng Jun 15 '18 at 15:01
  • We just answered your question and published full project source code. You can find it on [Twitter](https://twitter.com/TradePattern), [Youtube](https://youtu.be/eAm_bL6NM3g) and [GitHub](https://github.com/jsanalytics/DrawingLoopsInWPF). Cheers! – jsanalytics Jun 18 '18 at 20:57

1 Answers1

1

It's a little clumsy but you can create Geometry objects and then Path objects from SVG data. The Path can then be hosted in any container.

//Define SVG data
string pathData = "M 4.4285714e-6,196.64791 C 71.557031,196.64791 202.13304,-0.49493571 99.047621,-0.49493571 c -103.0854176,0 -4.93638,197.14284571 99.047619,197.14284571 103.984,0 197.9832,-197.14284571 99.04762,-197.14284571 -98.93558,0 3.94706,197.14284571 99.04762,197.14284571 95.10056,0 199.7498,-197.14284571 99.04761,-197.14284571 -100.70219,0 4.52998,197.14284571 99.04762,197.14284571";
//Create converter
var converter = TypeDescriptor.GetConverter(typeof(Geometry));

//Create Path
var p = new Path() {
    Data = (Geometry)converter.ConvertFrom(pathData),
    Stroke = new SolidColorBrush(Colors.Red),
    StrokeThickness = 4
};
Chronocide
  • 191
  • 2
  • 7