I've got a really annoying problem. I have an image taken from a PDF in ScrollViewer that is in Canvas. I want to put "Points of Interest" in that image and I want to move that POI / Mark with that image. So far I can put mark to the correct position and that mark moves along with the moving image. The problem is that on a first move / start of drag of image my mark jumps away AND THEN moves along with the image..
I get a position from image => Point p = e.GetPosition(sender as Image)
In the image below you can see situation, when I start to drag the image after I've put that mark. I have marked down POI in left fragment / border of an image that was moved to right border of canvas.. So just left fragment / border of an image was visible
How can I rid of that? I don't use OnStartManipulation / OnStartDrag event
Dimensions of canvas: 400 x 702 Dimensions of image: 1362 x 792
Movement of mark is implemented via updating Margin
Here is the code:
private void imagePDF_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
this.image_Transform.TranslateX += e.Delta.Translation.X;
this.image_Transform.TranslateY += e.Delta.Translation.Y;
imageDeltaX = this.image_Transform.TranslateX;
imageDeltaY = this.image_Transform.TranslateY;
//update mark position
foreach (var p in Points)
{
Shapes[Points.IndexOf(p)].Margin = new Thickness(p.x + imageDeltaX, p.y + imageDeltaY, 0, 0);
Labels[Points.IndexOf(p)].Margin = new Thickness(p.x + imageDeltaX, p.y + imageDeltaY, 0, 0);
}
}
Any help would be appreciated. I'm really desperate. I'm still newbie to UWP and C# so my solution isn't probably the best. If you encounter any other issue that I do not know about, please be so kind and tell me..
I tried to do it with Canvas.Left / Canvas.Top but still with no success.. seems that marks "anchors" to an image, when I first drag the image.. But I do not call any methods / code to do so.. Please help
So Ok, this is final solution:
private void imagePDF_Tapped(object sender, TappedRoutedEventArgs e)
{
tapPosition = e.GetPosition(sender as Image);
var x = tapPosition.X;
var y = tapPosition.Y;
AddMarkToPosition(++countPOI, x, y);
}
private void AddMarkToPosition(int id, double x, double y)
{
Points.Add(new PointOfInterest(countPOI, x, y));
DrawShape(x, y);
DisplayLabel(x, y, id.ToString());
}
private void DrawShape(double x, double y)
{
shape = new Ellipse
{
Width = 30,
Height = 30,
Fill = new SolidColorBrush(Colors.Red),
Stroke = new SolidColorBrush(Colors.Black),
};
shape.SetValue(Canvas.LeftProperty, x - 15 + imageDeltaX);
shape.SetValue(Canvas.TopProperty, y - 15 + imageDeltaY);
Shapes.Add(shape);
canvasPDF.Children.Add(shape);
}
private void DisplayLabel(double x, double y, string s)
{
label = new TextBlock
{
Foreground = new SolidColorBrush(Colors.White),
FontSize = 25,
Text = s
};
label.SetValue(Canvas.LeftProperty, x - 8 + imageDeltaX);
label.SetValue(Canvas.TopProperty, y - 20 + imageDeltaY);
Labels.Add(label);
canvasPDF.Children.Add(label);
}
private bool IsOutOfBorders(double x, double y)
{
var b = true;
if ((x > (imagePDF.ActualWidth - 30)) || (x < 0) || (y > imagePDF.ActualHeight) || (y < 0))
{
b = true;
}
else b = false;
return b;
}
private void UpdatePOI()
{
foreach (var p in Points)
{
Shapes[Points.IndexOf(p)].SetValue(Canvas.LeftProperty, p.x + imageDeltaX - 15);
Shapes[Points.IndexOf(p)].SetValue(Canvas.TopProperty, p.y + imageDeltaY - 15);
if (IsOutOfBorders(p.x + imageDeltaX, p.y + imageDeltaY)) Shapes[Points.IndexOf(p)].Visibility = Visibility.Collapsed;
else Shapes[Points.IndexOf(p)].Visibility = Visibility.Visible;
Labels[Points.IndexOf(p)].SetValue(Canvas.LeftProperty, p.x + imageDeltaX - 8);
Labels[Points.IndexOf(p)].SetValue(Canvas.TopProperty, p.y + imageDeltaY - 20);
if (IsOutOfBorders(p.x + imageDeltaX, p.y + imageDeltaY)) Labels[Points.IndexOf(p)].Visibility = Visibility.Collapsed;
else Labels[Points.IndexOf(p)].Visibility = Visibility.Visible;
}
}
private void imagePDF_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
this.image_Transform.TranslateX += e.Delta.Translation.X;
this.image_Transform.TranslateY += e.Delta.Translation.Y;
imageDeltaX = this.image_Transform.TranslateX;
imageDeltaY = this.image_Transform.TranslateY;
UpdatePOI();
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments