Question

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

<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

那么你有什么想法我应该如何使用这个图像作为我的折线轮廓？

Answer 1

我没有尝试使用PolyLine，但有了一条路径，你就可以像这样设置它。

<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>

Answer 2

您可以使用设置为Tile的{{3}} ImageBrush和TileMode来指定所需的图片图块尺寸。

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

使用图像作为折线笔划轮廓

2 个答案: