• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

How to avoid blur when Zooming a image? May be SVG could help?

 
Ranch Hand
Posts: 31
  • Likes 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I display an image(.png) in a container, actually in a JGraphx library's component called mxCell. But when I zoom in the image, it vagued. How to avoid this?
I did search and I found Batik may help because it uses SVG. So How should I Display a SVG format image in a container? And zoom won't make it blur.
1517297665(1).png
[Thumbnail for 1517297665(1).png]
What I have achieved
1517297731(1).png
[Thumbnail for 1517297731(1).png]
What I want to reach
 
Bartender
Posts: 5465
212
  • Likes 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
What kind of images are you working with? For normal pictures from a camera, enlargement, certainly if not too extreme, gives excellent results (see the standard Java classes like BufferedImageOp and its variants, in combination with RenderingHints).

If you have such an image, then SVG has two options: either the BitMap is simply incorporated in the SVG-file, in which case enlargement has the same problems, or the BitMap is converted into geometric figures like Lines and Bezier curves. Inkscape has such a facility, but I don't know how well that works.

If you yourself create images by drawing straight lines and such into, say, a BufferedImage, then you might as well create a Path, that works similar to SVG and scales without blurring. See the API.



 
Jose Ariza
Ranch Hand
Posts: 31
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Piet Souris wrote:What kind of images are you working with? For normal pictures from a camera, enlargement, certainly if not too extreme, gives excellent results (see the standard Java classes like BufferedImageOp and its variants, in combination with RenderingHints).

If you have such an image, then SVG has two options: either the BitMap is simply incorporated in the SVG-file, in which case enlargement has the same problems, or the BitMap is converted into geometric figures like Lines and Bezier curves. Inkscape has such a facility, but I don't know how well that works.

If you yourself create images by drawing straight lines and such into, say, a BufferedImage, then you might as well create a Path, that works similar to SVG and scales without blurring. See the API.




Thanks for answering.
Actually, I stored a png image under resource folder of the project, and I used it with a third party library called JGraphx, like this
The pic is 16 * 16 pixels, so it got blurring when I zoom the graph(Panel). So in your way, I should convert the pic into BufferedImage first by java, and reuse it. Am I understand right?
 
Piet Souris
Bartender
Posts: 5465
212
  • Likes 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
No, that won't help.

You see, if you have that 16x16 icon and you enlarge it, then extra pixels must be invented, somehow, but that will always lead to some loss of quality. You can try to convert that icon into a genuine SVG, meaning it will somehow convert the pixels into scalable Lines and Circles and such, but how well such a conversion works is uncertain. Try it out with Inkscape, if you can.

The alternative I was talking about, is to create your icon in terms of Lines, Circles, Moves and Curves, by creating a Path (see the API for the possibilities). If you draw that Path into say a BufferedImage, you can set the scale of the Graphics2D object to any size, and you can draw next without any distorsion. But this requires some knowledge and experience.

Another possibility is to have your icon at different sizes, for instance 16 x 16, 32 x 32, et cetera, if that is possible. Then if you need the icon at a certain size, pick the icon that has closest resolution, so that scaling will be kept to a minimum.
 
Jose Ariza
Ranch Hand
Posts: 31
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Simply the third way won't achieve, cause I don't have multiple icons  
But I will try the other two, Especially SVG way. Thank you very much!!!
 
Saloon Keeper
Posts: 15485
363
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I see that the JGraphX library has a com.mxgraph.shape package. Can you compose your symbols from shapes in that package?
 
Jose Ariza
Ranch Hand
Posts: 31
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Stephan van Hulst wrote:I see that the JGraphX library has a com.mxgraph.shape package. Can you compose your symbols from shapes in that package?


I apply the image to a mxCell in JGraphx by style. This means I should define the style that mxCell used. It's Something like this

So,the STYLE_SHAPE is image. I don't know Can I compose a image by shape. And how to store the new image in project.
So, I'll have a try.
Thanks for the reply.
 
Piet Souris
Bartender
Posts: 5465
212
  • Likes 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
It might be creating a genuine SVG, this way, or it might be generating a bitmap. I don't know that library, but I will take a look at it. Keep us informed aout your findings!
 
Jose Ariza
Ranch Hand
Posts: 31
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Piet Souris wrote:It might be creating a genuine SVG, this way, or it might be generating a bitmap. I don't know that library, but I will take a look at it. Keep us informed aout your findings!


OK! I'm glad to offer you a simple SSCCE. btw, I found Batik or JFreeSVG could convert png to SVG.
 
Piet Souris
Bartender
Posts: 5465
212
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
It took me some trouble (including NetBeans crashing), but I downloaded JGraphX and got your code up and running.
Unfortunately, it refused to load my png. I replaced your line

with this line:

but I get a Severe Error that it can't load the file. According to the output console I see this error:

jan 30, 2018 10:25:27 PM com.mxgraph.util.mxUtils loadImage
SEVERE: Failed to load image from D:\Syls bestanden\bezier_0.png


Looking at  'com.mxgraph.util.mxUtils loadImage' I see this code:

Well, I commented what I could find out.

Important is that your image is loaded into a BufferedImage and so you will have scaling problems. I'll try to fix my URL problem and see if there is a way to convert the image into a genuine SVG, and whether JGraphX can handle such a file. But it is getting a little late over here, so I hope I have time tomorrow. Meanwhile see if you can convert your png into a rel SVG. Wonder what result that will give.
 
Jose Ariza
Ranch Hand
Posts: 31
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I checked API doc for mxConstants.STYLE_IMAGE, there's something like this

Defines the key for the image style. Possible values are any image URL, registered key in mxImageResources or short data URI as defined in mxImageBundle. The type of the value is String.


So the picture on your disk can't be a URL, while a picture on the Internet could.
So, you can load pic from Internet like this

Or, you can put your bezier png under your project, for example, new a folder(resource) in your project, and put the picture there.

If you still want to load a picture from your disk, it's should be a URI path, like this,

see answers in this web.
 
Piet Souris
Bartender
Posts: 5465
212
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Thanks for the info. I used

Well, my image has a much larger resolution, and so it scales without noticable distortion from initially very small to the full size. So, my advice for now is: if your logo is not too complicated, recreate it to a much larger size (if the png is getting too large, try jpg).
Still to try: how does JGraphX react to an svg file. Have you made any progress with this?
 
Jose Ariza
Ranch Hand
Posts: 31
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
yes, I did some search works, but without a clear answer yet. I'm going to do further searching later cause I have to do some work...
Thanks for replying me so much ( a nice forum). If I have any progress I will post my resolution to you.  
 
Saloon Keeper
Posts: 27752
196
Android Eclipse IDE Tomcat Server Redhat Java Linux
  • Likes 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
There's basically 3 types of image formats.

1. Bitmap formats. For example, Window bitmap (BMP) files and TIFF files. These tend to look awful when scaled. TIFF (Tagged Image Format) is used for embedded bitmap graphics in PDF files. It's a run-length encoding originally used by FAX machines.

2. Lossy-compression formats like PNG and JPEG. They scale better, but tend to blur.

3. Scalable formats. Stuff like SVG (which stands for Scalable Vector Graphics) or PostScript. Other stuff like object drawing types (DXF). These scale very cleanly, but are best suited for line-art objects. Photographic-style parts of an SVG image will be held in a data chunk in format 1 or 2.

For schematic symbols, SVG is indeed a good option, where available. The main thing you need is a display renderer that can read the SVG (which is basically just a set of drawing instructions) and executes them to produce a display/print bitmap.

For stuff like icons, SVG is overkill, so the application might keep 3 or 4 copies of a type 1 or 2 icon rendered at different resolutions, because that's all the app really needs anyway. SVG, on the other hand is good where you want to be able to smoothly stretch an image to any size.
 
Piet Souris
Bartender
Posts: 5465
212
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I replaced the png by a genuine svg file, but the code still uses ImageIO.read to read the file. I was hoping that some special routine would take care of that one. Nope. So this route is not working. Now, looking at the code of JGraphX, I think it is possible to adapt JGraphX so that is uses, in case of scaling, the most suitable reolution present, but that will be a hazardous job (or maybe previous replier has some solution for this). So, unless something else comes to mind, I stick to my advice: make a big-resolution version of  your icon, so that enlargement can be avoided most of the time.

PS: png involves a lossless compression.
 
With a little knowledge, a cast iron skillet is non-stick and lasts a lifetime.
reply
    Bookmark Topic Watch Topic
  • New Topic