如何在WPF中使用图像作为线或路径上的ImageBrush

如何在WPF中使用图像作为线或路径上的ImageBrush,wpf,line,imagebrush,Wpf,Line,Imagebrush,我有一个画布,我在上面画线(通过线或路径),指示用户要走的路。是否有办法更改线条,使其显示重复的图像?我要找的是有一个台阶图标(带透明度的png)而不是一条直线 谢谢 我不太确定我是否完全理解你想要什么,但这里是我从你的帖子中理解的两分钱: 可以使用直线和/或路径对象绘制直线。通过使用路径,可以绘制曲线,而不是直线。为了简化设计过程,请使用MS Expression Blend,并使用屏幕左侧工具箱中的“铅笔”工具绘制线条。确保使用路径的“StrokeThickness”属性来更改每条曲线的厚度

我有一个画布,我在上面画线(通过线或路径),指示用户要走的路。是否有办法更改线条,使其显示重复的图像?我要找的是有一个台阶图标(带透明度的png)而不是一条直线


谢谢

我不太确定我是否完全理解你想要什么,但这里是我从你的帖子中理解的两分钱:

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

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

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


另外,尝试在Expression Blend中使用一些预定义的形状。单击“工具箱”右侧屏幕左侧的“资源”选项卡,并导航到“形状”。

这将为
路径绘制一个重复的图像作为笔划。使用
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 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();
}
public主窗口()
{
初始化组件();
var addAnimationThread=新线程(新线程开始(()=>
{
对于(int i=0;i<25;i++)
{
Dispatcher.Invoke(新操作(()=>
{
Image Image=this.FindResource(“followPathImage”)作为图像;
canvas.Children.Add(图像);
}));
睡眠(199);
}
}));
addAnimationThread.Start();
}

他希望用图像替换线条的笔划或填充。现在让图像沿着路径方向移动!(那可能是相当痛苦的)在这个问题上到处投反对票。想解释一下对这个答案的反对票吗?@H.B:我很确定你不能使用ImageBrush,但你可以使用“MatrixAnimationUsingPath”并将“DoesRotateWithTangent”设置为true,这比我预期的要简单,但仍然不是一件小事,现在答案是完整的,gj:)@H.B:显然不是,2票反对,但我不知道有什么问题,因为没有人评论