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

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

3 голосов
/ 09 января 2011

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

Спасибо!

Ответы [ 2 ]

5 голосов
/ 10 января 2011

Это нарисует повторное изображение как Штрих для 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();
}
0 голосов
/ 09 января 2011

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

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

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

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

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

...