Как использовать изображение в качестве ImageBrush на линии или пути в WPF

У меня есть холст, на котором я рисую линии (с помощью линий или путей), которые указывают путь для пользователей. Есть ли способ изменить строку, чтобы вместо нее отображалось повторяющееся изображение? Что я ищу, так это иметь значок шага (png с прозрачностью) вместо прямой линии.

Спасибо!


wpf line imagebrush
person Jonthemoon    schedule 09.01.2011    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Это нарисует повторяющееся изображение как Stroke для 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();
}
person Fredrik Hedblad    schedule 09.01.2011
comment
А теперь заставьте изображение следовать направлению пути! (Это, наверное, довольно больно) - person H.B.; 10.01.2011
comment
Понижение повсюду в этом вопросе. Хотите объяснить отрицательный ответ на этот ответ? - person Fredrik Hedblad; 10.01.2011
comment
@HB: Я почти уверен, что вы не можете использовать для этого ImageBrush, но вы можете использовать «MatrixAnimationUsingPath» с «DoesRotateWithTangent», установленным на True - person Fredrik Hedblad; 10.01.2011
comment
Это менее сложно, чем я ожидал, но все же не тривиальный вопрос, теперь ответ завершен, gj :) - person H.B.; 10.01.2011
comment
@H.B: Видимо нет, 2 минуса, но я не знаю, что с этим не так, так как никто не комментирует - person Fredrik Hedblad; 10.01.2011

arrow_upward
-3
arrow_downward

Я не совсем уверен, что точно понимаю, чего вы хотите, но вот мои два цента на то, что я понял из вашего поста:

Вы можете рисовать линии, используя объекты Line и/или Path. Используя контуры, вы можете рисовать изогнутые линии, а не линейные. Чтобы упростить процесс проектирования, используйте MS Expression Blend и рисуйте линии с помощью инструмента «Карандаш» из панели инструментов в левой части экрана. Обязательно поиграйте со свойством «StrokeThickness» контура, чтобы изменить толщину каждой кривой.

Вы можете создавать кнопки и рисовать их с помощью файла изображения png. Вам необходимо инициализировать свойство «Background» кнопки для объекта ImageBrush, который имеет ImageSource. Например, значок шага может быть пользовательским интерфейсом кнопки. Вы можете сделать это для многих других элементов, а не только для кнопки.

Вы также можете напрямую импортировать файлы изображений как объекты «Изображение» и обрабатывать их события, такие как MouseEnter, MouseLeave, MouseLeftButtonDown и т. д. В этом случае вы можете рассматривать изображение как интерактивный элемент, который пользователи могут щелкнуть, ввести, покинуть и т. д.

Кроме того, попробуйте использовать некоторые из предопределенных форм в Expression Blend. Перейдите на вкладку «Активы» в левой части экрана рядом с панелью инструментов и перейдите к «Фигуры».

person user1234567    schedule 09.01.2011
comment
Он хочет, чтобы штрих или заливка линии были заменены изображением. - person kevindaub; 10.01.2011