如何将图像从画布中的一个点移动到另一个点

本文关键字:一个 移动 另一个 图像 布中 | 更新日期: 2023-09-27 18:33:56

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

如何将图像从画布中的一个点移动到另一个点

请参阅频道 9 Kinect 快速入门系列(骨骼跟踪基础) 为了移动图像,我将添加代码。对于不断变化的图像大小,我会使用类似形状游戏中的飞行文本。希望这有帮助!

移动图像 (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更改为您想要的任何关节。