Introduction

For this question my previous article is enough but not efficient. Because there I set the text on the image using static (x,y) co-ordinates using WriteableBitmap. In this sample we need to draw text on dynamic (x,y) co-ordinates on a touch move and so I thought the "WriteableBitmapEx" library is the best match for this requirement. Because this library adds more extensions to WriteableBitmap, thereby we can do direct manipulation of a bitmap and could be used to generate fast procedural images by drawing directly to a bitmap.

Requirements:

Description:

Let's start development with the following procedure.

Step 1



Step 2

Open MainPage.xaml and add the following XAML code having two image controls and one button.

XAML code

  1. <Grid x:Name="ContentPanel" Margin="5">
  2. <Grid.RowDefinitions>
  3. <RowDefinition Height="Auto"/>
  4. <RowDefinition Height="Auto"/>
  5. <RowDefinition Height="*"/>
  6. </Grid.RowDefinitions>
  7. <Image Grid.Row="0" MouseMove="Image_MouseMove" Name="OrginalImage" Stretch="Fill" Height="250" Source="/Nature.jpg"/>
  8. <Button Grid.Row="1" Content="ALter" Width="200" Height="80" Click="AlterButton_Click" Foreground="#FFD66A6A" BorderBrush="#FF16C71E"/>
  9. <Image Grid.Row="2" Name="AlterImage" />
  10. </Grid>
Step 3

Initialize the WriteableBitmap with OrginalImage on page load.

C# code
  1. private WriteableBitmap writeableBmp;
  2. private void MainPage_Loaded(object sender, RoutedEventArgs e)
  3. {
  4. // Init WriteableBitmap
  5. writeableBmp = new WriteableBitmap(OrginalImage,null);
  6. writeableBmp.Invalidate();
  7. }
Step 4

Get (x,y) co-ordinates of the selected image area on the MouseMove Event and fill the writeableBmp with a rectangle to draw the text on the original image.

C# code
  1. private void Image_MouseMove(object sender, MouseEventArgs e)
  2. {
  3. var mp = GetMousePoint(e);
  4. writeableBmp.FillRectangle(mp.X, mp.Y, mp.X +5, mp.Y +5, Colors.Red);
  5. OrginalImage.Source = writeableBmp; //set drawable text on image
  6. }
Note: Here to get (x,y) co-ordinates of the image selected area, we need to add two helper classes ControlPoint.cs ,Vector.cs that are available from the sample source code of this article.



Step 5

If you want to alter specific image pixels and replace them with your object value, you can do this with an existing WriteableBitmap class like the following.

C# code
  1. private void AlterImage_Click(object sender, RoutedEventArgs e)
  2. {
  3. ImagePixelsAlter(new ExecuteAction((bitmap) => {AlterImage.Source = bitmap; }));
  4. }
  5. // A method for altering specific pixels of given image
  6. public void ImagePixelsAlter(ExecuteAction action)
  7. {
  8. WriteableBitmap writeableBitmap = new WriteableBitmap(OrginalImage, null);
  9. for (int i = 0; i < writeableBitmap.Pixels.Count(); i++)
  10. {
  11. if (i % 3 == 0) //here i am trying to alter odd pixels of image
  12. {
  13. writeableBitmap.Pixels.SetValue(-95756, i);
  14. }
  15. }
  17. action(writeableBitmap);
  18. }
  19. public delegate void ExecuteAction(WriteableBitmap bitmap);
Output






This article is also available at my original blog link.