Hello!!
I have a question about images in Vision.
If you check the attached image, the reduced image looks very distorted.
When I insert an image into 'Vision' and reduce the size of the image, the image becomes distorted. Why does this happen? Is there a solution?
Thank you in advance for your reply.
Yuck; that's some bad aliasing. This image is being rendered by an image component? ...if not, what type of component is displaying the image?
1 Like
I registered the png image in image management, added the image component, and bound the image path.
Is there any other way besides this?
PNG is a raster format. It's explicitly rendered at some specific size, and you're asking it to be shrunk down, which is a problem with infinitely many solutions. None of the solutions available in Java Swing are particularly good.
The image in question looks a lot like an SVG. Do you have the original SVG version of the image? SVGs are, by definition, scalable vector graphics, better suited for arbitrary resizing.
3 Likes
I also tried it with an SVG image, but the image was distorted as well.
Is there a way to prevent the image from being distorted?
Note how the built in image library has multiple scaled versions of each image. Create multiple scaled versions of the image and set the image path based upon the size of the image component.
More than once, I've done this sort of thing dynamically with button icons using a component adaptor to detect the resize event.
1 Like
Could you show us what the SVG looks like and how you're setting it up?
2 Likes
Image work was done using Adobe Illustrator.
SVG Option 1
- Style : Internal CSS
- Font : SVG
- Image : Preservation
- Object ID : Layer Name
- Decimal Point : 4
- Check box
- Check : Collapse
- Check : Reflection
SVG Option 2
- SVG Profile (V): SVG 1.1
Font - Letter (T): SVG
- Partial settings (S): All glyphs
option - Image Location(L): Connection
advanced options - CSS property (C): Style property
- Decimal places (I): 3
- Encoding (N): ISO 8859-1
- Check Box
- Check : Reduce element output (F)
Attach the image file and settings image.
thank you
1 Like
Well this is interesting:
I used your SVG file. Top is drag and drop from the file manager (Windows Explorer) and bottom is upload to image management and using the image component:
However, when I go into preview mode, the aliasing on the bottom goes away:
I'm guessing it's just an issue with the design mode render as preview mode works fine. Have you tried launching a Vision client and seeing if it renders correctly or not?
Edit: I just noticed drag and drop results in broken gradients and layering in this case, so I wouldn't recommend it here.
This has to do with how Vision converts the SVG into objects when drag-and-dropped:
Further reading:
3 Likes
When I drag the svg file into the video, it doesn't get distorted.
Thanks for your answer.