Surface project - part 14 (Major Demo - Rich Media Map - Image Component)

For supervisors, they want the image component can be editable, which means user can add their own drawing on to existing image, or create a new image instead. There is an sdk example which does the same thing. In the example, user can draw, erase and undo stroke, however, user cannot choose the thickness of the stroke nor save the image. As this application, the media map, is all about interactive with push pin, but not a painting application, thus I remove the undo function and implement the function to choose the stroke's thickness and also the ability to save the drawing.

Following code shows how to change the thickness of the stroke

     private void StrokeSizeSlider_ValueChange (object sender, RoutedPropertyChangedEventArgs<double> e)
    {
      DrawingPadCanvas.DefaultDrawingAttributes.Width = StrokeSizeSlider.Value;
      DrawingPadCanvas.DefaultDrawingAttributes.Height = StrokeSizeSlider.Value;
    }

Following snaps show how to create a new image.

Following snaps show how to draw on an existing image

Following code shows how to implement saving function.

 private void SaveImage_TouchDown(object sender, TouchEventArgs e)
    {
      string path = "SavedImage.jpg";
      MemoryStream ms = new MemoryStream();
      FileStream fs = new FileStream(path, FileMode.Create);
      RenderTargetBitmap rtb = new RenderTargetBitmap((int)DrawingPadCanvas.Width, (int)DrawingPadCanvas.Height, 96d, 96d, PixelFormats.Default);
      rtb.Render(DrawingPadCanvas);
      JpegBitmapEncoder encoder = new JpegBitmapEncoder();
      encoder.Frames.Add(BitmapFrame.Create(rtb));
      encoder.Save(fs);
      fs.Close();
    }


After saving the image, it will be stored in local computer