How can I draw lines in WPF inkCanvas with sequence of PNGs

Question

I was trying to make a method to draw some arrowheads from a PNG image with transparency. While I moving mouse, the application will be plot that png along the path.

What is the way to make that?

Another form I was wondering is creating a polygnon shape. I was tryed draw the shape (triangle) when enter on mouse down event.

    void MainWindow_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        double posX = e.GetPosition(null).X;
        double posY = e.GetPosition(null).Y;

        double posX1 = posX - (posX / 4);
        double posY1 = posY - (posY / 4);

        double posX2 = posX + (posX / 4);
        double posY2 = posY;

        double posX3 = posX - (posX / 4);
        double posY3 = posY + (posY - posY / 3);


        Polygon p = new Polygon();
        p.Stroke = Brushes.Black;
        p.Fill = Brushes.LightBlue;
        p.StrokeThickness = 1;
        p.HorizontalAlignment = HorizontalAlignment.Left;
        p.VerticalAlignment = VerticalAlignment.Center;
        p.Points = new PointCollection() { new Point(posX1, posY1), new Point(posX2, posY2), new Point(posX3, posY3), new Point(posX1, posY1) };
        MyCanvas.Children.Add(p);
    }

But still can't click and draw a triangle correctly in mouse (x,y) position.

http://i.stack.imgur.com/bM2i4.png

Answer 1

Here is a quick example.

XAML

  <Canvas x:Name='DrawingCanvas'
          Margin='30'
          Background='LightBlue'
          MouseDown='Canvas_MouseDown'
          MouseMove='Canvas_MouseMove'
          MouseUp='Canvas_MouseUp'>
    <Rectangle>
      <Rectangle.Fill>
        <ImageBrush ImageSource='Arrow.png'  x:Name='ArrowBrush'/>
      </Rectangle.Fill>
    </Rectangle>
  </Canvas>

CODE

 public partial class MainWindow : Window {
    public MainWindow() {
      InitializeComponent();
    }
    private bool _isDrawing = false;
    private Point _lastPosition;
    const double MIN_MOVEMENT = 60;
    private void Canvas_MouseDown(object sender, MouseButtonEventArgs e) {
      _isDrawing = true;
      _lastPosition = e.GetPosition(DrawingCanvas);
      // add the first arrow
      AddArrow(_lastPosition);
    }

    private void Canvas_MouseMove(object sender, MouseEventArgs e) {
      if (!_isDrawing)
      {
        return;
      }
      var currentPosition = e.GetPosition(DrawingCanvas);
      // draw a new image if mouse has traveled minimum distance
      if (Math.Abs((currentPosition.X - _lastPosition.X)) > MIN_MOVEMENT ||
          Math.Abs((currentPosition.Y - _lastPosition.Y)) > MIN_MOVEMENT)
      {
        AddArrow(currentPosition);
        _lastPosition = e.GetPosition(DrawingCanvas);
      }


    }

    private void AddArrow(Point currentPosition) {
      var rect = new Rectangle();
      rect.Width = 120;
      rect.Height = 120;
      rect.Fill = ArrowBrush;

      Canvas.SetTop(rect, currentPosition.Y);
      Canvas.SetLeft(rect, currentPosition.X);
      DrawingCanvas.Children.Add(rect);

    }

    private void Canvas_MouseUp(object sender, MouseButtonEventArgs e) {
      _isDrawing = true;
    }
  }

Screenshot