25058


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

[code]

    <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>
    
[/code]


CC BY-SA 3.0
2016-05-21T03:44:13.987
25056
2016-05-21T06:26:34.177
9130
question
c# wpf
WPFで線の周りだけ画像を表示する


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

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

[code]

    <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>
    
[/code]

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

[code]

    <Image
        Name="canvas"
        Source="Images/image.jpg"
        Stretch="Fill">
        <Image.Clip>
            <RectangleGeometry
                Rect="585,85,30,430" />
        </Image.Clip>
    </Image>
    
[/code]


CC BY-SA 3.0
2016-05-21T04:48:41.160
25058
2016-05-21T06:26:34.177
2016-05-21T06:26:34.177
5750
5750
25056
answer