Change background according to screen resolution or size( width and height)

GoJS
1

Hi, I am using background image(drawing) in my diagram (http://jsfiddle.net/anupam_001/krjnb7kz/).
My requirement is to fit my background image to canvas as per screen resolution, and keep all the nodes at
same position respective to background.

I have tried ‘fixedBounds’ property along with dragComputation as mentioned in ‘Absolute positioning within the viewport’.

In above mentioned fiddle if you will try to resize result window and run code nodes will get repositioned.
How can I keep all nodes respective to background.

2

You might need to implement a “ViewportBoundsChanged” DiagramEvent listener that runs through all of the Diagram.nodes (and Diagram.parts) and reassigns their Node.locations to scale their locations according to the new scale you are using for the background image.

This assumes that their “ideal” location, or location at 1x1 scaling, is stored on the node data, so that you can reliably calculate the real location without accumulating errors.

3

Hi, walter. thanks for your response.
Is there any direct calculation, to assign location according to document bounds.

Actually, I am creating image using canvas width and height, since the width of canvas(div containing canvas) is mentioned in percent (to cover different screen sizes). Instead of scaling image I am creating image according to canvas width and height.

could you please share an example for the same.

4

Node.location and Node.position are always in document coordinates, as is Diagram.viewportBounds.

I don’t know what we could do to help you.