How to move an image from one point to another point in an canvas

Question

I am writing a program in that i want to move an image from one position to another position when the pointer is on the image.the destination of an image will be anywhere in the window.
And,while moving to the destination the image size has to gradually decrease to some particular size.
I am using WPF C# for this
Thanks in advance

Answer 1

See the Channel 9 Kinect QuickStart Series(Skeletal Tracking Fundementals) For moving the images, and I will add code. For the changing image size I would use something like Flying Text in Shape Game. Hope this Helps!

Moving the Image(XAML)

<Window x:Class="SkeletalTracking.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="600" Width="800" Loaded="Window_Loaded" 
    xmlns:my="clr-namespace:Microsoft.Samples.Kinect.WpfViewers;assembly=Microsoft.Samples.Kinect.WpfViewers" 
    Closing="Window_Closing" WindowState="Maximized">       
<Canvas Name="MainCanvas">
    <my:KinectColorViewer Canvas.Left="0" Canvas.Top="0" Width="640" Height="480" Name="kinectColorViewer1" 
                          Kinect="{Binding ElementName=kinectSensorChooser1, Path=Kinect}" />
    <my:KinectSensorChooser Canvas.Left="250" Canvas.Top="380" Name="kinectSensorChooser1" Width="328" />
    <Image Canvas.Left="66" Canvas.Top="90" Height="87" Name="headImage" Stretch="Fill" Width="84" Source="/SkeletalTracking;component/c4f-color.png" />
</Canvas>

Inner Code

void sensor_AllFramesReady(object sender, AllFramesReadyEventArgs e)
    {
        if (closing)
        {
            return;
        }

        //Get a skeleton
        Skeleton first =  GetFirstSkeleton(e);

        if (first == null)
        {
            return; 
        }



        //set scaled position
        //ScalePosition(headImage, first.Joints[JointType.Head]);

        GetCameraPoint(first, e); 

    }

    void GetCameraPoint(Skeleton first, AllFramesReadyEventArgs e)
    {

        using (DepthImageFrame depth = e.OpenDepthImageFrame())
        {
            if (depth == null ||
                kinectSensorChooser1.Kinect == null)
            {
                return;
            }


            //Map a joint location to a point on the depth map
            //head
            DepthImagePoint headDepthPoint =
                depth.MapFromSkeletonPoint(first.Joints[JointType.Head].Position);


            //Map a depth point to a point on the color image
            //head
            ColorImagePoint headColorPoint =
                depth.MapToColorImagePoint(headDepthPoint.X, headDepthPoint.Y,
                ColorImageFormat.RgbResolution640x480Fps30);
    }


    Skeleton GetFirstSkeleton(AllFramesReadyEventArgs e)
    {
        using (SkeletonFrame skeletonFrameData = e.OpenSkeletonFrame())
        {
            if (skeletonFrameData == null)
            {
                return null; 
            }


            skeletonFrameData.CopySkeletonDataTo(allSkeletons);

            //get the first tracked skeleton
            Skeleton first = (from s in allSkeletons
                                     where s.TrackingState == SkeletonTrackingState.Tracked
                                     select s).FirstOrDefault();

            return first;

        }
    }

  private void ScalePosition(FrameworkElement element, Joint joint)
    {
        //convert the value to X/Y
        //Joint scaledJoint = joint.ScaleTo(1280, 720); 

        //convert & scale (.3 = means 1/3 of joint distance)
        Joint scaledJoint = joint.ScaleTo(1280, 720, .3f, .3f);

        Canvas.SetLeft(element, scaledJoint.Position.X);
        Canvas.SetTop(element, scaledJoint.Position.Y); 

    }

Flying Text(class)

public class FlyingText
{
    private static readonly List<FlyingText> FlyingTexts = new List<FlyingText>();
    private readonly double fontGrow;
    private readonly string text;
    private System.Windows.Point center;
    private System.Windows.Media.Brush brush;
    private double fontSize;
    private double alpha;
    private Label label;

    public FlyingText(string s, double size, System.Windows.Point center)
    {
        this.text = s;
        this.fontSize = Math.Max(1, size);
        this.fontGrow = Math.Sqrt(size) * 0.4;
        this.center = center;
        this.alpha = 1.0;
        this.label = null;
        this.brush = null;
    }

    public static void NewFlyingText(double size, System.Windows.Point center, string s)
    {
        FlyingTexts.Add(new FlyingText(s, size, center));
    }

    public static void Draw(UIElementCollection children)
    {
        for (int i = 0; i < FlyingTexts.Count; i++)
        {
            FlyingText flyout = FlyingTexts[i];
            if (flyout.alpha <= 0)
            {
                FlyingTexts.Remove(flyout);
                i--;
            }
        }

        foreach (var flyout in FlyingTexts)
        {
            flyout.Advance();
            children.Add(flyout.label);
        }
    }

    private void Advance()
    {
        this.alpha -= 0.01;
        if (this.alpha < 0)
        {
            this.alpha = 0;
        }

        if (this.brush == null)
        {
            this.brush = new SolidColorBrush(System.Windows.Media.Color.FromArgb(255, 255, 255, 255));
        }

        if (this.label == null)
        {
            return;
        }

        this.brush.Opacity = Math.Pow(this.alpha, 1.5);
        this.label.Foreground = this.brush;
        this.fontSize += this.fontGrow;
        this.label.FontSize = Math.Max(1, this.fontSize);
        Rect renderRect = new Rect(this.label.RenderSize);
        this.label.SetValue(Canvas.LeftProperty, this.center.X - (renderRect.Width / 2));
        this.label.SetValue(Canvas.TopProperty, this.center.Y - (renderRect.Height / 2));
    }
}

The Code In Your Project

            FlyingText.FlyingText.NewFlyingText(this.skeleton.Width / 30, new Point(this.skeleton.Width / 2,
            this.skeleton.Height / 2), e.Matched);

Now obviously you want your image to be smaller, and not text, but I figure you can work that out on your own, also your would change the images in XAML to whatever you wanted and the Joints to whatever joints you wanted too.