Picture inside shape as a mask

Hello,

I want to put a picture inside a shape (so the shape will act as a mask).
The picture will not be as backround, it will uniform fill the shape.

How can I do that?

Thanks!

Didn’t we cover this topic in Align picture from the top and Background of complex geometry node ?

Hi Watler,

I am trying now your second option there. This option we didn’t cover (I think) :

https://forum.nwoods.com/t/background-of-complex-geometry-node/7093:

“Another answer is to define the Shape.geometry so that it acts as a mask, with a hollow area showing the Picture underneath.”

In our silverlight solution, we used this option. This is the silverlight code :

<Path Width="120" Height="80"
 Data="F1 M 733.33,355.333L 733.33,282.743C 733.33,279.112 730.388,276.17 726.756,276.17L 605.238,276.17C 601.606,276.17 598.664,279.112 598.664,282.743L 598.664,368.263C 598.664,371.894 601.606,374.836 605.238,374.836L 713.827,374.836L 733.33,355.333 Z"
 Stretch="Fill" Style="{Binding IsSelected, ConverterParameter=Path, Converter={StaticResource theSelectionConverter}}" />
<Grid Margin="2,2,2,2" Background="red" Clip="M116.00001,60.977322 L116.00001,5.0630207 C116.00001,2.2661407 113.46578,5.4405234E-07 110.3372,5.4405234E-07 L5.6627679,5.4405234E-07 C2.5342343,5.4405234E-07 9.8081546E-06,2.2661407 9.8081546E-06,5.0630207 L9.8081546E-06,70.936981 C9.8081546E-06,73.733864 2.5342343,76 5.6627679,76 L99.200325,76 z">
        <Image Visibility="{Binding ShowMock, Converter={StaticResource boolToVisibilityConverter}}" Stretch="Uniform" Height="3000" Source="{Binding MockImage}" />
</Grid>`

I dont want to use the ‘isClipping’ property.

Hi Walter,

I found a proper solution. In the meantime this problem is closed.

Thanks a lot for the help and the effort you invested :)

Einav

You’re welcome. What geometry string did you use?

I didn’t use a mask.

This is the fixed code :

		return g(go.Node, "Position",
			{
				isClipping: true,
				selectionObjectName: "BORDER"
			},  // cause the main Shape's geometry to clip other element(s)
			g(go.Shape,  // this is the border
				{
					width: 118,
					height: 78,
					name: "BORDER",
					portId: "",  // links connect with edge of shape, not with rectangular Node
					fill: null,
					stroke: "cyan",
					strokeWidth: 2,
					geometry: actionGeometry  // default to a triangle
				}),
			g(go.Shape,
				{
					width: 118,
					height: 78,
					isPanelMain: true,  // this is the clipping shape
					position: new go.Point(2, 2),  // because border's strokeWidth: 4
					geometry: actionGeometry // default to a triangle
				}),
			g(go.Panel, "Viewbox",
				{
					width: 118,
					height: NaN,
					position: new go.Point(2, 2),  // because border's strokeWidth: 4
				},
				g(go.Picture,
					{
						imageStretch: go.GraphObject.UniformToFill,  // but don't distort the image within the picture
					},
					new go.Binding("source", "mockupUrl")
				)
			)
		);