Silverlight：对图像进行动画处理和/或平移

发布于 2024-08-24 16:40:30 字数 466 浏览 10 评论 0原文

我有一位客户请求将动画/平移图像添加到他们的网站。基本上，这是一个标准尺寸的图像，他想将其放在稍微窄一点的框架中，并将图像从左到右平移作为他网站上的视觉元素。无需单击和拖动；它基本上只是从左到右的动画平移，然后重新开始另一张图片。

这是一个 .NET 页面，我放着一堆 Silverlight 书籍，我想学习它。我认为现在正是最好的时机，因为现在我实际上可以真正使用它了。郑重声明，我是一名经验丰富的 .NET 开发人员，但除了阅读几本书的前几章外，我并没有过多地使用 Silverlight。

所以...第一个问题，我假设这可能与 Silverlight 相关，我错了吗？

第二个问题，如果我能做到，有人能指出我正确的方向吗？需要什么功能/控制/技术来做到这一点？我正在阅读深度变焦，但这似乎并不是我想要的。我只需要采取一个标准大小的 jpeg/gif/任何文件，并让它慢慢地从左到右平移。为了做到这一点，我需要学习/花一些时间学习哪些 Silverlight 功能？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

楠木可依 2024-08-31 16:40:30

这当然是可行的。本质上，您将在画布上放置一个图像，并且您将处理该画布上的 MouseMove 事件。当鼠标从一侧跟踪到另一侧时，您将对图像应用平移以将其从一侧移动到另一侧。

以下代码应该可以帮助您入门：

将带有图像的画布添加到 MainPage.xaml（注意 MouseMove/Enter/Leave 事件）

<Canvas x:Name="LayoutCanvas" MouseMove="LayoutCanvas_MouseMove" MouseEnter="LayoutCanvas_MouseEnter" Height="200" Width="200">
     <Image x:Name="imgToMove" Source="myimage.png" />
</Canvas>

在后面的代码中，添加 MouseMove/Enter/Leave 事件

    Point lastMousePos = new Point();
    Point currentMousePos = new Point();
    double amountToMove = 1;
    private void LayoutCanvas_MouseMove(object sender, MouseEventArgs e)
    {
        currentMousePos = e.GetPosition(LayoutCanvas);
        if (lastMousePos.X > currentMousePos.X)
        {
            amountToMove--;
        }
        else
        {
            amountToMove++;
        }
        imgToMove.SetValue(Canvas.LeftProperty, amountToMove);
        lastMousePos = currentMousePos;
    }

    private void LayoutCanvas_MouseEnter(object sender, MouseEventArgs e)
    {
        lastMousePos = e.GetPosition(LayoutCanvas);
    }

    private void LayoutCanvas_MouseLeave(object sender, MouseEventArgs e)
    {
        imgToMove.SetValue(Canvas.LeftProperty, (double)0);
    }

然后就完成了。现在，当您将鼠标移到图像上时，图像将从左到右或从右到左平移。当您离开图像时，它会返回到原来的位置。

This is certainly doable. You will essentially have an image sitting on a canvas and you'll handle MouseMove events on that canvas. As the mouse tracks from one side to the other, you'll apply a translation to the image to move it from side to side.

The following code should get you started:

Add a canvas with your image to MainPage.xaml (notice the MouseMove/Enter/Leave events)

<Canvas x:Name="LayoutCanvas" MouseMove="LayoutCanvas_MouseMove" MouseEnter="LayoutCanvas_MouseEnter" Height="200" Width="200">
     <Image x:Name="imgToMove" Source="myimage.png" />
</Canvas>

In your code behind, add MouseMove/Enter/Leave events

    Point lastMousePos = new Point();
    Point currentMousePos = new Point();
    double amountToMove = 1;
    private void LayoutCanvas_MouseMove(object sender, MouseEventArgs e)
    {
        currentMousePos = e.GetPosition(LayoutCanvas);
        if (lastMousePos.X > currentMousePos.X)
        {
            amountToMove--;
        }
        else
        {
            amountToMove++;
        }
        imgToMove.SetValue(Canvas.LeftProperty, amountToMove);
        lastMousePos = currentMousePos;
    }

    private void LayoutCanvas_MouseEnter(object sender, MouseEventArgs e)
    {
        lastMousePos = e.GetPosition(LayoutCanvas);
    }

    private void LayoutCanvas_MouseLeave(object sender, MouseEventArgs e)
    {
        imgToMove.SetValue(Canvas.LeftProperty, (double)0);
    }

And you're done. Now, when you move your mouse over the image, the image will be translated from either left to right or right to left. When you leave the image, it will go back to its original position.

回复收藏 0 原文