Recommended size of images

Question

Hi,I use images both in the palette and for the shapes.But what are the recommended size for image in the palette?And how to I handle resizing of a shape once it is part of a diagram? Can the shape change to a different size of image or what is the best way for me to handle this?

Gowtham Gunashekar · Answer

Hi Torben,

On the further analysis of the shared details, we understood that you want to render an image in symbol palette and while dragging the image from palette and dragging over the diagram you want to change the image size. We suggest you use the SymbolDragSize property of the palette to change the size of the image nodes when it is part of a diagram. Please refer to the following sample for how to change the image size when the image is a part of a diagram. In the sample we have set the SymbolDragSize of palette as 250 X 250. So, when we drag a symbol from palette and drag over the diagram it gets 250X 250 size.

Code snippet:

</SfSymbolPalette>

@code{

public SymbolDragSizeModel DragSize = new SymbolDragSizeModel()

{

Height = 250,

Width = 250

};

}

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ImagePalette1128222756.zip

In symbol palette there is not default or recommended size, the palette render the symbols based on the symbol width and symbol height.

Regards

Gowtham

Torben Laursen · Answer

Sorry for being unclear.It is not regarding dragging. But since I use image in the nodes the size of the image should match the shown node size, so:#1When shown in the palette with standard settings what should the size of the used image be?#2Once dropped on the diagram how do I handle that the user resize the node or zoom the diagram so the image used in the node is still looking good?

Arunkumar Manoharan · Answer

Hi Torben, 
 




#1 
When shown in the palette with standard settings what should the size of the used image be? 

 
 
There is no default size for the node in the diagram. for rendering the nodes in the diagram height and width must be provided. 


#2 
Once dropped on the diagram how do I handle that the user resize the node or zoom the diagram so the image used in the node is still looking good? 

 
We suggest you use AspectRatio. For enabling AspectRatio you need to add constraints of AspectRatio to the node. By enabling it when you resize the node both the height and width of the node are updated. For more information, please refer to the below code snippet and sample link. 
 
Code snippet: 




NodeDefaults = new DiagramNode() 
        { Constraints = NodeConstraints.Default | NodeConstraints.AspectRatio 
        }; 
 
Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Image-1740480494 
  
Regards,Arun

Torben Laursen · Answer

Hi,I maked two images here. What image size should I use here?It is unclear to me how the size of the image is managed inside Attachment: Capture_8fe2b7b2.zip

Aravind Ravi · Answer

Hi Torben,

We have created a sample to show different size for the image in the symbol palette. On analysis the provided screenshot, we suspect that you have set SymbolHeight and SymbolWidth properties for the symbol palette. Please remove the symbol height and symbol width properties from symbol palette and set height and width for the image node. So that symbol gets rendered with the given height and width. Please refer to the below code snippet and sample

// Do not set SymbolHeight and SymbolWidth in symbol palette

</SfSymbolPalette>

new DiagramNode()

{

Id = "image1",

Shape = new DiagramShape() { Type = Shapes.Image, Source=https://www.pngitem.com/pimgs/m/462-4623623_blazor-icon-blazor-logo-svg-hd-png-download.png },

Height = 80,

Width = 100,

},

new DiagramNode()

{

Id = "image2",

Shape = new DiagramShape() { Type = Shapes.Image, Source=https://media.glassdoor.com/sqll/263207/syncfusion-squarelogo.png },

Height = 120,

Width = 150,

},

Sample: https://www.syncfusion.com/downloads/support/forum/166879/7z/Symbol-Palette766318026

Regards

Aravind Ravi

Torben Laursen · Answer

Thanks, I got it solved now

Gowtham Gunashekar · Answer

Hi Torben,  
 
Thanks for your update. Please let us know whether you need any further assistance on this. 
 
 
Regards  
Gowtham