c# - 如何将图像从 Canvas 中的一个点移动到另一个点

Question

我正在编写一个程序，当指针位于图像上时，我想将图像从一个位置移动到另一个位置。图像的目的地将在窗口中的任何位置。< br/> 并且，在移动到目的地时，图像大小必须逐渐减小到某个特定大小。
我为此使用 WPF C#
提前致谢

Answer 1

参见 Channel 9 Kinect QuickStart Series(Skeletal Tracking Fundementals)为了移动图像，我将添加代码。对于不断变化的图像大小，我会在 Shape Game 中使用 Flying Text 之类的东西。希望这对您有所帮助!

移动图像 (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>

内码

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); 

    }

飞行文字(类)

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));
    }
}

项目中的代码

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

现在显然你希望你的图像更小，而不是文本，但我认为你可以自己解决这个问题，你也可以将 XAML 中的图像更改为你想要的任何内容和 Joints 到你想要的任何关节。