使用图像作为折线描边轮廓答案

【问题标题】：Use an image as polyline stroke outline使用图像作为折线描边轮廓
【发布时间】：2013-02-14 22:11:17
【问题描述】：

我有一个类似绘画的应用程序，当我移动鼠标时，它会通过折线绘制一条线。现在我想用图案图像替换折线轮廓，因此当我在画布中移动鼠标时，它会将该图像重复为折线的轮廓。我已经写了这段代码：

<Canvas x:Name="canvas" Background="#00FFFFFF" MouseMove="Canvas_MouseMove">
    <Polyline x:Name="polyline" StrokeThickness="20">
        <Polyline.Stroke>
            <VisualBrush >
                <VisualBrush.Visual>
                    <Image Source="1.png"></Image>
                </VisualBrush.Visual>
            </VisualBrush>
        </Polyline.Stroke>
    </Polyline>
</Canvas>

唯一的问题是它使用图像作为整个画布的不可见背景，当我移动鼠标时，部分背景变得可见！看看这张照片就明白我的意思了：

http://goo.gl/2wPKN

如果你想看看，这也是我的图像模式：

http://goo.gl/staHt

那么你知道我应该如何使用这张图片作为我的折线轮廓吗？

【问题讨论】：

你能提供一张应该是什么样子的图片吗？在您的情况下，“大纲”到底是什么意思？
我想用一个小的重复图像替换折线笔划中定义的简单线。结果将类似于我当前的输出（goo.gl/2wPKN），但图像将在折线的路径中重复，而不是作为画布的背景。我希望我说清楚了，但如果我仍然没有任何意义，请原谅！
您是否尝试过如下答案所示的平铺画笔？您可以将ViewportUnits 设置为Absolute 并设置适当的视口大小。
是的，我尝试了这个答案，此代码 <ImageBrush ImageSource="1.png" Viewport="1,1,1,1" TileMode="Tile" /> 给出与以前相同的结果，并且通过添加 ViewportUnits="Absolute" 它只会给出一个没有任何图像的恒定粉红色画笔。
尝试将 Viewport 设置为有意义的值，例如 Viewport="0,0,20,20" 左右。

标签： wpf image polyline stroke visualbrush

【解决方案1】：

您可以使用ImageBrush，将TileMode 设置为Tile，并使用Viewport 指定所需的图像平铺大小。

<Polyline x:Name="polyline" StrokeThickness="20">
    <Polyline.Stroke>
        <ImageBrush ImageSource="1.png" TileMode="Tile"
                    ViewportUnits="Absolute" Viewport="0,0,20,20"/>
    </Polyline.Stroke>
</Polyline>

【讨论】：

Danke Clemens，这正是我想要的，感谢您的宝贵时间。

【解决方案2】：

我没有用折线尝试过，但是你可以用一个路径来设置它的笔触。

<Path StrokeThickness="10" Data="M 10,10 100,10" Stretch="Fill" Margin="81,36,251,100">
   <Path.Stroke>
        <ImageBrush ImageSource="1.png" Viewport="0,0,1,1" TileMode="Tile"/>
   </Path.Stroke>
</Path>

【讨论】：

感谢您的输入，此代码 <ImageBrush ImageSource="1.png" Viewport="1,1,1,1" TileMode="Tile" /> 给出与之前相同的结果，并且通过添加 ViewportUnits="Absolute" 它只会给出一个没有任何图像的恒定粉红色刷子。