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!
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!
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")
)
)
);