0

WPFのGrid上に線を指定し、その周りだけある画像を表示させるということがしたいです。
調べた結果、LineのStrokeに画像のImageBrushを指定すれば出来そうなことがわかり試したのですが、ImageBrushのStretchがNoneでは、画像の中央を基準に線の画像を描画しており、思ったように表示されません(背景の画像と重なり線が見えなくなるようになって欲しい)。

<Grid Name="grid">
    <Image Name="canvas" Source="Images/image.jpg" ></Image>
    <Line StrokeThickness="30" X1="600" Y1="100" X2="600" Y2="400">
        <Line.Stroke>
            <ImageBrush Stretch="None"  ImageSource="Images/image.jpg"/>
        </Line.Stroke>
    </Line>
</Grid>

1 件の回答 1

1

ImageUIElement.OpacityMaskもしくはUIElement.Clipを設定すればよいかと思います。

OpacityMaskの場合、設定したBrushの不透明部分だけが表示されます。

<Image
    Name="canvas"
    Source="Images/image.jpg">
    <Image.OpacityMask>
        <DrawingBrush
            Viewbox="0,0,800,800"
            ViewboxUnits="Absolute">
            <DrawingBrush.Drawing>>
                <GeometryDrawing>
                    <GeometryDrawing.Pen>
                        <Pen
                            Thickness="30"
                            Brush="Black" />
                    </GeometryDrawing.Pen>
                    <GeometryDrawing.Geometry>
                        <LineGeometry
                            StartPoint="600,100"
                            EndPoint="600,400" />
                    </GeometryDrawing.Geometry>
                </GeometryDrawing>
            </DrawingBrush.Drawing>
        </DrawingBrush>
    </Image.OpacityMask>
</Image>

Clipの場合指定したGeometry内の領域が表示されますので、直線を長方形などに変換してやる必要があります。

<Image
    Name="canvas"
    Source="Images/image.jpg"
    Stretch="Fill">
    <Image.Clip>
        <RectangleGeometry
            Rect="585,85,30,430" />
    </Image.Clip>
</Image>
2
  • UIElement.OpacityMaskの方を試したのですが、傾きが0の線を表示させようと考え、StartPointとEndPointにStartPoint="100,100" EndPoint="300,100"を設定したのですが、画像全体が表示されてしまい、一部分だけを表示することが出来ません
    – odan
    2016年5月21日 6:04
  • @odan すみません。透明部分を入れるのを忘れていました。
    – pgrho
    2016年5月21日 6:18

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。