PDA

View Full Version : InkCanvas and Images



Preafos
October 27th, 2008, 05:11 PM
Hi,

I'm write a application in WPF to display handwritten text and images. For this purpose i choosed the InkCanvas-object.

I finally could add an image to the InkCanvas by adding it as a child to the Children-property. I even could select, scale and move it. But there are some main issues I have to solve.

First of all it is only possible to move the image by selecting the highlighted border, but I want to do the same action by clicking on the object and moving it.

Second the image jumps in a unpredictable direction during a scale process and is not always scaled correctly. (Stretch-property is set to "Uniform" and StrechDirections to "Both")

The preview scaling frame is not correctlly set to "Uniform".


Does any one have an idea, how i can solve the first to problems?

Greets,
Eckhard

PS.: Here is a link to a demo-application: http://msdn.microsoft.com/en-us/library/aa972135.aspx

Just paste the following code into the methode "OnInsertTextBox":

BitmapImage b = new BitmapImage();

b.BeginInit();
b.CreateOptions = BitmapCreateOptions.PreservePixelFormat;
// This URI have to be an image on your pc
b.UriSource = new Uri(@"C:\temp\csharp\me.jpg");
b.DecodePixelWidth = 200;
b.EndInit();

Image i = new Image();
i.Source = b;
inkCanvas.Children.Add(i);

kirupa
October 29th, 2008, 02:34 AM
Preafos - I fiddled with something just like that for an image-annotator that I created as Blend sample a while ago: http://download.microsoft.com/download/f/6/e/f6e14692-cbf9-4d7f-88f0-454719e5cb5f/Notetable.zip (taken from here (http://expression.microsoft.com/en-us/cc643423.aspx))

For your first issue, are you wanting to move the image when you are running the app? For the second issue, I am having a tough time visualizing what you are trying to do, and the download link isn't working. Could you zip up your source files and upload them to a location I can look at?

Thanks,
Kirupa

Preafos
October 29th, 2008, 06:33 AM
http://www.uni-koblenz.de/~mmce/image.zip

This archiv should have everything you need for that. I added a menu item "Image" to insert an image.

Thank you for your time, I will look into the given file.

Greets,
Eckhard

PS.:

The scaling problem is easy to reproduce. Insert a image. Maybe move it to an other location. First scale it in the vertical and than in the horizontal direction. You will notice, that the last scale attempt doesn't work.

To the first problem. An easy fix is to extend the class Image an implement the following code:



public class MyImage : Image
{

private bool _mouseDown;
private Point _point;

public MyImage()
{
this.Cursor = Cursors.SizeAll;
this.ForceCursor = true;
}

protected override void OnMouseDown(System.Windows.Input.MouseButtonEventA rgs e)
{
_mouseDown = true;

_point = e.GetPosition(this);
}

protected override void OnMouseMove(System.Windows.Input.MouseEventArgs e)
{
if (_mouseDown)
{
Point point = e.GetPosition((IInputElement)Parent);
point.Offset(-_point.X, -_point.Y);

SetValue(InkCanvas.LeftProperty, point.X);
SetValue(InkCanvas.TopProperty, point.Y);
}
}

protected override void OnMouseUp(System.Windows.Input.MouseButtonEventArg s e)
{
_mouseDown = false;
}
}


Thanks for the Programm "NoteTable". It shows a lot of possibilities how I can maybe improve my code.