Hi I have searched the site, how could use a pattern as a background for a shape and I could not find anything.
Someone could give me an example, (I want to do is something almost identical to planogram http://gojs.net/latest/samples/planogram.html but with images)
Thanks and sorry for my English
Actually the Planogram sample already includes support for showing images. Take a look at the node template. There’s already a Picture object in there. The only thing that it misses is a Binding, such as:
$(go.Picture, { … },
new go.Binding(“source”, “src”))
And then you just need to set the “src” property on your node data to be the URL of an image. You might also want to change the alignment and the desiredSize of the Picture, and maybe to add a TextBlock, to suit your needs.
If you really want to show a regular pattern as the “fill” of the Shape, you can set it to be a Brush that uses a pattern element. Brush.pattern However you’ll need to initialize that HTMLImageElement or HTMLCanvasElement in code, to be a shared object used by the node template.
Yes, you want to set the Shape.fill, which is now “green”, to be a Brush that you create of type Brush.Pattern whose Brush.pattern is an HTMLImageElement whose source is your image of stones.
You’ll need to create a separate Brush like this for each of the Parts that are in your Palette. Put them all in a JavaScript object that you use as a map from string to Brush. Define a conversion function (I’ll call it convertNameToBrush) that takes a string and returns the appropriate Brush from this mapping. Add a new go.Binding(“fill”, “pat”, convertNameToBrush) to the Shape. Then you can set data.pat to “stones” or “wood” or whatever you have defined in your string-name-to-pattern-Brush mappings used by the conversion function.
I guess you don’t need the Picture at all, so you can delete it from your template.
I performed the function as you suggested, and it worked perfectly. Thank you!