如何在WPF中将图像用作Line或Path的ImageBrush

Question

如何在WPF中将图像用作Line或Path的ImageBrush

wpflineimagebrush

4

我有一个画布，我在上面绘制线条（通过线或路径），以指示用户要遵循的道路。是否有一种方法可以更改线条，使其显示重复的图像？我想要的是用步骤图标（带透明度的png）代替直线。

谢谢！

- Jonthemoon

2个回答

-3

我不太确定我完全理解你想要什么，但是根据你的帖子，这是我的两分建议：

您可以使用Line和/或Path对象绘制线条。通过使用路径，您可以绘制曲线而不是直线。为了简化设计过程，请使用MS Expression Blend并使用屏幕左侧工具箱中的“铅笔”工具绘制线条。确保玩转Path的“StrokeThickness”属性以更改每个曲线的粗细程度。

您可以创建按钮并用png图像文件进行绘制。您需要将按钮的“Background”属性初始化为具有ImageSource的ImageBrush对象。例如，步骤图标可以是按钮的UI。您可以对许多其他元素执行此操作，而不仅仅是按钮。

您还可以直接导入图像文件作为“Image”对象，并处理它们的事件，如MouseEnter，MouseLeave，MouseLeftButtonDown等。在这种情况下，您可以将图像视为用户可以单击、输入、离开等交互式元素。

此外，尝试使用Expression Blend中的一些预定义形状。单击屏幕左侧工具箱旁边的“Assets”选项卡，然后导航到“Shapes”。

- user1234567

他想要用一张图片替换线条的描边或填充。 - kevindaub

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Fredrik Hedblad · Accepted Answer

这将会以描边的方式重复绘制一张图片到 Path 上。通过调整 Viewport 的值来达到你想要的效果。

<Path StrokeThickness="10" Data="M 10,10 100,10" Stretch="Fill">
    <Path.Stroke>
        <ImageBrush ImageSource="C:\arrow.gif" Viewport="0,0,0.1,1" TileMode="Tile"/>
    </Path.Stroke>
</Path>

更新

要旋转ImageBrush，您可以向其添加一个RotateTransform

        <ImageBrush ImageSource="C:\arrow.gif" Viewport="0,0,1,0.1" TileMode="Tile">
            <ImageBrush.Transform>
                <RotateTransform Angle="90"/>
            </ImageBrush.Transform>
        </ImageBrush>

如果您想要一个沿着路径移动的图像，可以使用与此问题答案类似的方法。我稍微修改了一下，使用了一个图像代替箭头。

<Window.Resources>
    <PathGeometry x:Key="Path" x:Shared="False" Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100"/>
    <Image x:Key="followPathImage" x:Shared="False" x:Name="Arrow1" Source="C:\arrow.gif" Width="16" Height="16">
        <Image.RenderTransform>
            <TransformGroup>
                <TranslateTransform X="-8" Y="-8"/>
                <MatrixTransform>
                    <MatrixTransform.Matrix>
                        <Matrix/>
                    </MatrixTransform.Matrix>
                </MatrixTransform>
            </TransformGroup>
        </Image.RenderTransform>
        <Image.Triggers>
            <EventTrigger RoutedEvent="Image.Loaded">
                <BeginStoryboard>
                    <Storyboard>
                        <MatrixAnimationUsingPath Storyboard.Target="{Binding RelativeSource={RelativeSource AncestorType={x:Type Image}}}" 
                                                  Storyboard.TargetProperty="RenderTransform.Children[1].Matrix"                                 
                                                  DoesRotateWithTangent="True" 
                                                  Duration="0:0:5"  
                                                  BeginTime="0:0:0" 
                                                  RepeatBehavior="Forever"
                                                  PathGeometry="{StaticResource Path}" >
                        </MatrixAnimationUsingPath>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Image.Triggers>
    </Image>
</Window.Resources>
<Canvas Width="400" Height="400" Name="canvas">
    <Path Data="{StaticResource Path}" Opacity="0" Stroke="Blue" StrokeThickness="1"/>
    <Button Canvas.Left="184" Canvas.Top="253" Content="Button" Height="23" Name="button1" Width="75" Click="button1_Click" />
</Canvas>

还有一些后台代码来添加动画箭头

public MainWindow()
{
    InitializeComponent();
    var addAnimationThread = new Thread(new ThreadStart(() =>
    {
        for (int i = 0; i < 25; i++)
        {
            Dispatcher.Invoke(new Action(() =>
            {
                Image image = this.FindResource("followPathImage") as Image;
                canvas.Children.Add(image);
            }));
            Thread.Sleep(199);
        }
    }));
    addAnimationThread.Start();
}