Using the following XAML:
<Grid x:Name="grid" Background="LightBlue" ClipToBounds="True">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Viewbox x:Name="imgViewbox" >
<InkCanvas Grid.Row="0" Name="inkCanvas" Background="Red" >
<Image Source="Images/pic.png" HorizontalAlignment="Left" x:Name="imgObject" VerticalAlignment="Top" />
<Label>Testing</Label>
</InkCanvas>
</Viewbox>
</Grid>
I am trying to rotate around the center of the image and also use the wheel mouse to zoom. I have set up this transform group and event:
public MainWindow() {
InitializeComponent();
DataContext = new MainWindowViewModel();
transformGroup = new TransformGroup();
scaleTransform = new ScaleTransform();
rotateTransform = new RotateTransform();
translateTransform = new TranslateTransform();
transformGroup.Children.Add(rotateTransform);
transformGroup.Children.Add(scaleTransform);
transformGroup.Children.Add(translateTransform);
imgViewbox.RenderTransform = transformGroup;
imgViewbox.MouseWheel += ImageViewboxMouseWheel;
}
Rotate is simple:
void Rotate(object sender, RoutedEventArgs e) {
//imgViewbox.RenderTransformOrigin = new Point(0.5,0.5);
rotateTransform.Angle += 90;
}
but zoom is doing all sorts of weird stuff jumping around the screen. The code for zoom is here:
void ImageViewboxMouseWheel(object sender, MouseWheelEventArgs e) {
//imgViewbox.RenderTransformOrigin = new Point(0, 0);
double zoomFactor = DefaultZoomFactor;
if (e.Delta <= 0) zoomFactor = 1.0 / DefaultZoomFactor;
// DoZoom requires both the logical and physical location of the mouse pointer
var physicalPoint = e.GetPosition(imgViewbox);
if (transformGroup.Inverse != null) {
DoZoom(zoomFactor, transformGroup.Inverse.Transform(physicalPoint), physicalPoint);
}
else {
throw new ArgumentException("Missing Inverse");
}
//Set the center point of the ScaleTransform object to the cursor location.
scaleTransform.CenterX = e.GetPosition(imgViewbox).X;
scaleTransform.CenterY = e.GetPosition(imgViewbox).Y;
Debug.WriteLine(string.Format("IVMW Center {0},{1}", scaleTransform.CenterX, scaleTransform.CenterY));
}
public void DoZoom(double deltaZoom, Point mousePosition, Point physicalPosition) {
double currentZoom = scaleTransform.ScaleX;
currentZoom *= deltaZoom;
translateTransform.X = -1*(mousePosition.X*currentZoom - physicalPosition.X);
translateTransform.Y = -1*(mousePosition.X*currentZoom - physicalPosition.Y);
scaleTransform.ScaleX = currentZoom;
scaleTransform.ScaleY = currentZoom;
}
I have removed as much as I can, animations and such. Hopefully leaving only the key parts. I believe that the major problem is the scaleTransform.Center[X|Y] as the numbers that are being returned are all over the quadrant even when I try to click exactly in the same location. The RenderTransformOrigin doesn't seem to make any difference with the Center position but I am aware that I need it to rotate around center.
What am I doing wrong?
You need to offset the jump you get from changing the ScaleTranform's CenterX/Y in the TranslateTransform, here is a snippet from a pan & zoom control i wrote:
private void This_MouseWheel(object sender, MouseWheelEventArgs e)
{
if (IsZoomEnabled)
{
Point cursorPos = e.GetPosition(this);
Point newCenter = _scaleT.Inverse.Transform(_translateT.Inverse.Transform(cursorPos));
Point oldCenter = new Point(_scaleT.CenterX, _scaleT.CenterY);
Vector oldToNewCenter = newCenter - oldCenter;
_scaleT.CenterX = newCenter.X;
_scaleT.CenterY = newCenter.Y;
_translateT.X += oldToNewCenter.X * (_scaleT.ScaleX - 1.0);
_translateT.Y += oldToNewCenter.Y * (_scaleT.ScaleY - 1.0);
...
Hopefully you can adapt this to your code. Where the new center is calculated you might need to take your RotateTransform into account.
Related
I have a problem with object transformations via Manipulation events, more precisely matrix.
Problem: After a first successfull rotation/scale/translation of my object(btw: a Rectangle), the second manipulation (a translation in this case) will move the object in the direction of its new angle.
For example, if after a first rotation (new angle of 45°) I later touch the screen from right to left, the object will follow a 45° diagonal path instead of the path that I draw.
Expectation: I want my object to follow exactly the path I make on the screen regardless of its rotation.
Situation: I drop a Rectangle in a Canvas by code, this rectangle has "IsManipulationEnabled = true" and a "RenderTransformOrigin = new Point(.5, .5)" and "mySuperRectangle.ManipulationDelta += Container_ManipulationDelta;"
This is the code I use:
private void Container_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
{
try
{
if (e.OriginalSource != null)
{
Rectangle image = e.OriginalSource as Rectangle;
Point center = new Point(image.ActualWidth / 2.0, image.ActualHeight / 2.0);
Matrix imageMatrix = ((MatrixTransform)image.RenderTransform).Matrix;
center = imageMatrix.Transform(center);
// Move the Rectangle.
imageMatrix.Translate(e.DeltaManipulation.Translation.X,
e.DeltaManipulation.Translation.Y);
// Rotate the Rectangle.
imageMatrix.RotateAt(e.DeltaManipulation.Rotation,
center.X,
center.Y);
// Resize the Rectangle. Keep it square
// so use only the X value of Scale.
imageMatrix.ScaleAt(e.DeltaManipulation.Scale.X,
e.DeltaManipulation.Scale.X,
center.X,
center.Y);
// Apply changes
image.RenderTransform = new MatrixTransform(imageMatrix);
Rect containingRect =
new Rect(((FrameworkElement)e.ManipulationContainer).RenderSize);
Rect shapeBounds =
image.RenderTransform.TransformBounds(
new Rect(image.RenderSize));
// Check if the rectangle is completely in the window.
// If it is not and intertia is occuring, stop the manipulation.
if (e.IsInertial && !containingRect.Contains(shapeBounds))
{
e.Complete();
}
e.Handled = true;
}
}
catch (Exception)
{
throw;
}
}
Any ideas ?
Thanx a lot.
You should handle the manipulation event on the Canvas, because the origin of the manipulation should be relative to the fixed Canvas, instead of the moving Rectangle.
<Canvas IsManipulationEnabled="True"
ManipulationDelta="CanvasManipulationDelta">
<Rectangle x:Name="rectangle" Width="200" Height="200" Fill="Red">
<Rectangle.RenderTransform>
<MatrixTransform/>
</Rectangle.RenderTransform>
</Rectangle>
</Canvas>
The event handler would work like this:
private void CanvasManipulationDelta(object sender, ManipulationDeltaEventArgs e)
{
var transform = (MatrixTransform)rectangle.RenderTransform;
var matrix = transform.Matrix;
var center = e.ManipulationOrigin;
var scale = (e.DeltaManipulation.Scale.X + e.DeltaManipulation.Scale.Y) / 2;
matrix.ScaleAt(scale, scale, center.X, center.Y);
matrix.RotateAt(e.DeltaManipulation.Rotation, center.X, center.Y);
matrix.Translate(e.DeltaManipulation.Translation.X, e.DeltaManipulation.Translation.Y);
transform.Matrix = matrix;
}
Final code for me:
private void CanvasManipulationDelta(object sender, ManipulationDeltaEventArgs e)
{
var transform = rectangle.RenderTransform as MatrixTransform;
var matrix = transform.Matrix;
Point center = new Point(rectangle.ActualWidth / 2.0, rectangle.ActualHeight / 2.0);
center = matrix.Transform(center);
matrix.ScaleAt(e.DeltaManipulation.Scale.X , e.DeltaManipulation.Scale.X, center.X, center.Y);
matrix.RotateAt(e.DeltaManipulation.Rotation, center.X, center.Y);
matrix.Translate(e.DeltaManipulation.Translation.X, e.DeltaManipulation.Translation.Y);
rectangle.RenderTransform = new MatrixTransform(matrix);
}
Edit: Don't use the as operator without checking the result for null. In this case, if transform is null, create a new MatrixTransform and assign it to the RenderTransform property. Afterwards, reuse the transform and just update its Matrix property.
Improved code:
private void CanvasManipulationDelta(object sender, ManipulationDeltaEventArgs e)
{
var transform = rectangle.RenderTransform as MatrixTransform;
if (transform == null) // here
{
transform = new MatrixTransform();
rectangle.RenderTransform = transform;
}
var matrix = transform.Matrix;
var center = new Point(rectangle.ActualWidth / 2.0, rectangle.ActualHeight / 2.0);
center = matrix.Transform(center);
matrix.ScaleAt(e.DeltaManipulation.Scale.X , e.DeltaManipulation.Scale.X, center.X, center.Y);
matrix.RotateAt(e.DeltaManipulation.Rotation, center.X, center.Y);
matrix.Translate(e.DeltaManipulation.Translation.X, e.DeltaManipulation.Translation.Y);
transform.Matrix = matrix; // here
}
I know there are several posts on stack and others websites, but it seems I still make something wrong. When I zoom with MouseWheel event, the zoom is always not centered, but the left side of my canvas always stays on the left on my ViewBox, so when I zoom in, I only can see the left of my canvas.
XAML code :
<Grid x:Name="MainGrid">
<Viewbox x:Name="ViewBoxDessin" Stretch="None" HorizontalAlignment="Center" VerticalAlignment="Center">
<Canvas x:Name="monDessin" Background="WhiteSmoke" MouseWheel="monDessin_MouseWheel">
<Canvas.LayoutTransform>
<ScaleTransform x:Name="st" ScaleX="1" ScaleY="-1" CenterX=".5" CenterY=".5" />
</Canvas.LayoutTransform>
</Canvas>
</Viewbox>
<Viewbox x:Name="ViewBoxDessin2" Stretch="None">
<Canvas x:Name="monDessin2">
<Canvas.LayoutTransform>
<ScaleTransform x:Name="st2" ScaleX="1" ScaleY="1" CenterX=".5" CenterY=".5" />
</Canvas.LayoutTransform>
</Canvas>
</Viewbox>
</Grid>
Code behind
public AfficheGraphiquePiece()
{
InitializeComponent();
MakeMyDrawing();
ViewBoxDessin.Width = System.Windows.SystemParameters.PrimaryScreenWidth;
ViewBoxDessin.Height = System.Windows.SystemParameters.PrimaryScreenHeight;
double ech_x = monDessin.Width / System.Windows.SystemParameters.PrimaryScreenWidth;
double ech_y = monDessin.Height / System.Windows.SystemParameters.PrimaryScreenHeight;
double ech = Math.Min(ech_x, ech_y);
this.ech_full = ech;
st.ScaleX = ech;
st.ScaleY = -ech;
st2.ScaleX = ech;
st2.ScaleY = ech;
}
private void monDessin_MouseWheel(object sender, MouseWheelEventArgs e)
{
double zoom = e.Delta > 0 ? 1.1 : 0.9;
if(st.ScaleX<this.ech_full*1.1 && zoom<1)
{
st.ScaleX = this.ech_full;
st.ScaleY = -this.ech_full;
}
else
{
st.ScaleX *= zoom;
st.ScaleY *= zoom;
double coor_x = Mouse.GetPosition(monDessin).X;
double coor_y = Mouse.GetPosition(monDessin).Y;
st.CenterX = coor_x;
st.CenterY = coor_y;
}
}
Excuse me, didn't remove some code, and it could make confusion, just replaced it by a function MakeMyDrawing()
Well, after Clemens advise, and help of that link for matrix use, I could do the following :
XAML :
<Grid x:Name="MainGrid">
<Canvas x:Name="monDessin" Background="WhiteSmoke" MouseWheel="monDessin_MouseWheel" MouseLeftButtonDown="image_MouseLeftButtonDown" MouseMove="image_MouseMove" MouseLeftButtonUp="image_MouseLeftButtonUp" MouseLeave="image_MouseLeave" >
<Canvas.RenderTransform >
<MatrixTransform/>
</Canvas.RenderTransform>
</Canvas>
<Canvas x:Name="monDessin2">
<Canvas.RenderTransform >
<MatrixTransform/>
</Canvas.RenderTransform>
</Canvas>
</Grid>
Code behind
public AfficheGraphiquePiece(Repere rep)
{
InitializeComponent();
ClassGraphique monGraphe = new ClassGraphique(monDessin);
ClassGraphique monGraphe2 = new ClassGraphique(monDessin2);
MakeMyDrawing();
double screenWidth = System.Windows.SystemParameters.PrimaryScreenWidth;
double screenHeight = System.Windows.SystemParameters.PrimaryScreenHeight;
double ech_x = screenWidth/ monDessin.Width ;
double ech_y = screenHeight/ monDessin.Height;
double ech = Math.Min(ech_x, ech_y)*0.9;
this.ech_full = ech;
this.echelleNow = this.ech_full;
MatrixTransform maTrans =(MatrixTransform)monDessin.RenderTransform;
var mat = maTrans.Matrix;
mat.ScaleAt(ech, -ech, 0.1* screenWidth, (screenHeight-monDessin.Height*ech)/2-0.1*screenHeight);
MatrixTransform maTrans2 = (MatrixTransform)monDessin2.RenderTransform;
var mat2 = maTrans2.Matrix;
mat2.ScaleAt(ech, ech, 0.1 * screenWidth, screenHeight*ech-((screenHeight - monDessin.Height * ech) / 2 - 0.1 * screenHeight));
maTrans.Matrix = mat;
maTrans2.Matrix = mat2;
}
private void monDessin_MouseWheel(object sender, MouseWheelEventArgs e)
{
try
{
var position = e.GetPosition(monDessin);
MatrixTransform transform = (MatrixTransform)monDessin.RenderTransform;
MatrixTransform transform2 = (MatrixTransform)monDessin2.RenderTransform;
var matrix = transform.Matrix;
var matrix2 = transform2.Matrix;
var scale = e.Delta >= 0 ? 1.1 : (1.0 / 1.1);
this.echelleNow *= scale;
matrix.ScaleAtPrepend(scale, scale, position.X, position.Y);
matrix2.ScaleAtPrepend(scale, scale, position.X,monDessin.Height-position.Y);
monDessin.RenderTransform = new MatrixTransform(matrix);
monDessin2.RenderTransform = new MatrixTransform(matrix2);
}
catch { }
}
Here is a very basic example for zooming and panning a Canvas with fixed initial size. The MatrixTransform in the RenderTransform of the inner Canvas provides the necessary transformations, while the outer Canvas handles mouse input and sets an initial scaling.
<Canvas Background="Transparent"
SizeChanged="ViewportSizeChanged"
MouseLeftButtonDown="ViewportMouseLeftButtonDown"
MouseLeftButtonUp="ViewportMouseLeftButtonUp"
MouseMove="ViewportMouseMove"
MouseWheel="ViewportMouseWheel">
<Canvas x:Name="canvas" Width="1000" Height="600">
<Canvas.RenderTransform>
<MatrixTransform x:Name="transform"/>
</Canvas.RenderTransform>
<Ellipse Fill="Red" Width="100" Height="100" Canvas.Left="100" Canvas.Top="100"/>
<Ellipse Fill="Green" Width="100" Height="100" Canvas.Right="100" Canvas.Bottom="100"/>
</Canvas>
</Canvas>
Code behind:
private Point? mousePos;
private void ViewportSizeChanged(object sender, SizeChangedEventArgs e)
{
((MatrixTransform)canvas.RenderTransform).Matrix = new Matrix(
e.NewSize.Width / canvas.ActualWidth,
0, 0,
e.NewSize.Height / canvas.ActualHeight,
0, 0);
}
private void ViewportMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
var viewport = (UIElement)sender;
viewport.CaptureMouse();
mousePos = e.GetPosition(viewport);
}
private void ViewportMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
((UIElement)sender).ReleaseMouseCapture();
mousePos = null;
}
private void ViewportMouseMove(object sender, MouseEventArgs e)
{
if (mousePos.HasValue)
{
var pos = e.GetPosition((UIElement)sender);
var matrix = transform.Matrix;
matrix.Translate(pos.X - mousePos.Value.X, pos.Y - mousePos.Value.Y);
transform.Matrix = matrix;
mousePos = pos;
}
}
private void ViewportMouseWheel(object sender, MouseWheelEventArgs e)
{
var pos = e.GetPosition((UIElement)sender);
var matrix = transform.Matrix;
var scale = e.Delta > 0 ? 1.1 : 1 / 1.1;
matrix.ScaleAt(scale, scale, pos.X, pos.Y);
transform.Matrix = matrix;
}
i am a real newbe in the world of helixtoolkit and Graphics 3D.
What i make:
I have the homework to code a programm which lets you decorate a christmastree with different types of decoration.
One type of decoration is a candle. The problem. The candle is too small in relation to the tree.
My question:
How can i resize my FileModelVisual3D inside of the view_tree with code behind?
private void view_tree_MouseDown(object sender, MouseButtonEventArgs e)
{
if (typeOfdecoration == 1)
{
Decoration1Visual3D decoration;
decoration = new Decoration1Visual3D();
decoration.Fill = Brushes.Red;
Point3D? pt = view_tree.FindNearestPoint(e.GetPosition(view_tree));
if (pt.HasValue)
{
Point3D p = pt.Value;
decoration.Transform = new TranslateTransform3D(p.X, p.Y, p.Z);
view_tree.Children.Add(decoration);
MessageBox.Show(decoration.ToString());
decoration = null;
}
}
else if (typeOfdecoration == 2)
{
FileModelVisual3D fmv3D = new FileModelVisual3D();
fmv3D.Source = "C:/Users/flori/Documents/Schulisches/WFSST/christmastree_burtscherflorian/christmastree_burtscherflorian/2245176fd65db964db79f88f870f8154/candle.3DS";
Point3D? pt = view_tree.FindNearestPoint(e.GetPosition(view_tree));
if (pt.HasValue)
{
Point3D p = pt.Value;
fmv3D.Transform = new TranslateTransform3D(p.X, p.Y, p.Z);
view_tree.Children.Add(fmv3D);
MessageBox.Show(fmv3D.ToString());
fmv3D = null;
}
}
}
XAML-Code
<helix:HelixViewport3D x:Name="view_tree" Camera="{helix:PerspectiveCamera 5.3,-12.3,900,-6.3,11,-6.6}" CameraChanged="view_tree_CameraChanged" MouseDown="view_tree_MouseDown" Grid.Row="0" Grid.Column="0">
<helix:SunLight/>
<helix:FileModelVisual3D x:Name="model_tree" Source="c:/Users/flori/Documents/Schulisches/WFSST/christmastree_burtscherflorian/christmastree_burtscherflorian/Conifers tree 1 N100616.3DS"/>
</helix:HelixViewport3D>
<StackPanel Grid.Row="0" Grid.Column="1">
<RadioButton Name="rb_candle" Margin="10,10,10,0" IsChecked="True" Checked="rb_candle_Checked">Kerze</RadioButton>
<RadioButton Name="rb_ball" Margin="10,10,10,10" Checked="rb_candle_Checked">Kugel</RadioButton>
</StackPanel>
Hope that anybode can help!
I know for others its easy but i have no experiences in 3D-coding.
Thanks
In addition to your TranslateTransform3D, apply a ScaleTransform3D. Put both of them into a Transform3DGroup and use this as Transform on your FileModelVisual3D:
double factor = 2.0;
var transformGroup = new Transform3DGroup();
transformGroup.Children.Add(new TranslateTransform3D(p.X, p.Y, p.Z));
transformGroup.Children.Add(new ScaleTransform3D(factor, factor, factor));
fmv3D.Transform = transformGroup;
Of course, you may want to adjust the factor.
I have been struggling for two weeks for this problem . I am applying dragging and scaling to an image inside canvas.Dragging works fine and is limiting inside canvas IsBoundary functions but when I am applying scaling its drag area changes . If increases scaling with mouse drag area increases also and whem I make it shrink in size drag area also shrinks.Help me to solve this problem of limiting scaling
Thanks.
Here is my code link
sample
I think I understand your question. When you scale an item in a canvas the translation needs to account for the change in scale. Is that right?
Assuming this XAML:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Border Width="500"
Height="500"
BorderBrush="White"
BorderThickness="1">
<Canvas x:Name="MyCanvas">
<Rectangle x:Name="MyRectangle"
Width="50"
Height="50"
Fill="CornflowerBlue">
<Rectangle.RenderTransform>
<CompositeTransform TranslateX="225" TranslateY="225" />
</Rectangle.RenderTransform>
</Rectangle>
</Canvas>
</Border>
</Grid>
Try this code-behind:
void MainPage_Loaded(object sender, RoutedEventArgs args)
{
MyRectangle.ManipulationMode =
ManipulationModes.TranslateX
| ManipulationModes.TranslateY;
var transform = MyRectangle.RenderTransform as CompositeTransform;
var reposition = new Action<double, double>((x, y) =>
{
var size = new Size(MyRectangle.ActualWidth * transform.ScaleX, MyRectangle.ActualHeight * transform.ScaleY);
var location = MyRectangle.TransformToVisual(MyRectangle).TransformPoint(new Point(0, 0));
var minX = -location.X;
var maxX = MyCanvas.ActualWidth - size.Width;
var newX = Within(x, minX, maxX);
transform.TranslateX = Within(newX, minX, maxX);
var minY = -location.Y;
var maxY = MyCanvas.ActualHeight - size.Height;
var newY = Within(y, minY, maxX);
transform.TranslateY = Within(newY, minY, maxY);
});
MyRectangle.ManipulationDelta += (s, e) =>
{
var newX = transform.TranslateX + e.Delta.Translation.X;
var newY = transform.TranslateY + e.Delta.Translation.Y;
reposition(newX, newY);
};
MyRectangle.PointerWheelChanged += (s, e) =>
{
// require control
if (Window.Current.CoreWindow.GetKeyState(VirtualKey.Control)
== Windows.UI.Core.CoreVirtualKeyStates.None)
return;
// ignore horizontal
var props = e.GetCurrentPoint(MyRectangle).Properties;
if (props.IsHorizontalMouseWheel)
return;
// apply scale
var newScale = transform.ScaleX + (double)props.MouseWheelDelta * .001;
transform.ScaleX = transform.ScaleY = newScale;
// reposition
reposition(transform.TranslateX, transform.TranslateY);
};
}
public double Within(double value, double min, double max)
{
if (value <= min)
return min;
else if (value >= max)
return max;
else
return value;
}
I hope this helps.
Note: Since I am not on a touch machine right now, I implemented the mouse wheel to scale. But you can modify the code as you want. The logic would be identical.
Best of luck!
I have an Image viewer that displays an image. I want to draw a rectangle using the mouse over the image and get the x and y coordinates of the rectangle (X1, X2, Y1, and Y2). I will use these coordinates to create a search region and find the max and min values in an array that have the exact number of pixels as the image in both axes.
Can anyone guide me to a direction to start please?
You should use a canvas to display the image and draw a rectangle over it.
Example:
MainWindow.xaml:
<Window x:Class="CanvasRectangleSample.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow">
<Grid>
<Canvas x:Name="SampleImageCanvas"
MouseMove="SampleImageCanvas_MouseMove"
MouseDown="SampleImageCanvas_MouseDown"
Width="512" Height="389">
<Canvas.Background>
<!--Here you set the image to display -> You probably want to bind it to something. -->
<ImageBrush x:Name="SampleImage" Stretch="Uniform" ImageSource="C:\Users\Public\Pictures\Sample Pictures\Koala.jpg">
</ImageBrush>
</Canvas.Background>
<!-- Here you draw whatever you want on the canvas. -->
<!-- You'll probably want to bind its width and height to something too. -->
<Rectangle x:Name="ROI" Stroke="#FFF1133E" Width="50" Height="50"/>
</Canvas>
</Grid>
</Window>
MainWindow.xaml.cs:
using System.Windows;
using System.Windows.Input;
using System.Windows.Controls;
namespace CanvasRectangleSample
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
this.DataContext = this;
InitializeComponent();
}
// Handling the redrawing of the rectangle according to mouse location
private void SampleImageCanvas_MouseMove(object sender, MouseEventArgs e)
{
//get mouse location relative to the canvas
Point pt = e.MouseDevice.GetPosition(sender as Canvas);
//here you set the rectangle loction relative to the canvas
Canvas.SetLeft(ROI, pt.X - (int)(ROI.Width / 2));
Canvas.SetTop(ROI, pt.Y - (int)(ROI.Height / 2));
}
private void SampleImageCanvas_MouseDown(object sender, MouseButtonEventArgs e)
{
//Here you should handle saving the rectangle location
//don't forget to calculate the proportion between Canvas's size and real Image's size.
}
}
}
If you want you can limit the rectangle relocation to the canvas area with an if expression checking if the canvas area containes the mouse locaion
Thanks for the pointers and help:
Here is my finished code and it works. You place the mouse anywhere on the canvas hold mouse down and drag to create the rectangle. It could use some more improvement to drag and create the rectangle in any direction.
XAML:
<Canvas Name="ImageCanvas"
MouseMove="ImageCanvas_MouseMove"
MouseDown="ImageCanvas_MouseDown"
Height="240" Width="320"
HorizontalAlignment="Left"
Margin="87,514,0,0" VerticalAlignment="Top" MouseLeftButtonUp="ImageCanvas_MouseLeftButtonUp">
<Canvas.Background>
<ImageBrush x:Name="Image" Stretch="Uniform" ImageSource="C:\image.bmp">
</ImageBrush>
</Canvas.Background>
<Rectangle x:Name="ROI" Stroke="#FFF1133E" Width="20" Height="20" Canvas.Left="155" Canvas.Top="115" />
</Canvas>
Code:
double topLeftX = 0;
double topLeftY = 0;
double bottomRightX = 0;
double bottomrigthY = 0;
bool setRect = false;
private void ImageCanvas_MouseDown(object sender, MouseButtonEventArgs e)
{
topLeftY = topLeftX = bottomrigthY = bottomRightX = 0;
setRect = true;
System.Windows.Point pt = e.MouseDevice.GetPosition(sender as Canvas);
topLeftX = pt.X; topLeftY = pt.Y;
}
private void ImageCanvas_MouseMove(object sender, System.Windows.Input.MouseEventArgs e)
{
if (setRect == true)
{
//get mouse location relative to the canvas
System.Windows.Point pt = e.MouseDevice.GetPosition(sender as Canvas);
Canvas.SetLeft(ROI, topLeftX);
Canvas.SetTop(ROI, topLeftY);
ROI.Width = System.Math.Abs((int)(pt.X - topLeftX));
ROI.Height = System.Math.Abs((int)(pt.Y - topLeftY));
commandReturnTB.Text = (Convert.ToString(pt.X) + "," + Convert.ToString(pt.Y))+"\n";
}
}
private void ImageCanvas_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
System.Windows.Point pt = e.MouseDevice.GetPosition(sender as Canvas);
bottomRightX = pt.X;
bottomrigthY = pt.Y;
ROI.Width = System.Math.Abs((int)(bottomRightX - topLeftX));
ROI.Height = System.Math.Abs((int)(bottomrigthY - topLeftY));
Canvas.SetLeft(ROI, topLeftX);
Canvas.SetTop(ROI, topLeftY);
setRect = false;
commandReturnTB.Text = topLeftX + "," + topLeftY + "--" + bottomRightX + "," + bottomrigthY;
}