Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Qt Image Render Aliasing / Offset #153

Closed
jonoomph opened this issue Jul 9, 2019 · 8 comments
Closed

Qt Image Render Aliasing / Offset #153

jonoomph opened this issue Jul 9, 2019 · 8 comments

Comments

@jonoomph
Copy link

jonoomph commented Jul 9, 2019

When rendering using Qt5, I noticed that Resvg seems to be adding an aliased border to the sides of SVG renders. I am attaching a screenshot of an example SVG file, rendered in both Inkscape and Resvg.

Render-Aliasing1

Here is the SVG file I used (zipped for GitHub):
drawing-2.svg.zip

In OpenShot, the effect of this rendering artifact is quite noticeable, causing transparent borders around some of our masks and transitions. Here is a snippet of the code we are using to render to a QImage:

			ResvgRenderer renderer(QString::fromStdString(path));
			if (renderer.isValid()) {
				cached_image = std::shared_ptr<QImage>(new QImage(QSize(renderer.defaultSize().width(), renderer.defaultSize().height()), QImage::Format_RGBA8888));
				cached_image->fill(Qt::transparent);

				QPainter p(cached_image.get());
				renderer.render(&p);
				p.end();
                                ....

@RazrFalcon I would love to hear your thoughts on this.

@jonoomph
Copy link
Author

jonoomph commented Jul 9, 2019

Also, there are times where the border is on top and bottom also, but in the current example, the 1-pixel border is on the left and right side.

@RazrFalcon
Copy link
Owner

This is an expected backend-specific behavior:

Qt cairo raqote
qt cairo raqote

Antialiasing is implemented differently in different applications. Usually, when I'm writing some Qt code, I'm using the +0.5 trick to make QPainter's antialiasing a bit better/sharper.

I'm not sure what can be done in this case. There are no Qt-specific "offsets" in the resvg.

I suggest using integer numbers. The provided SVG has floating: 622.85711, 82.85714, etc. This will fix your problem.

@leeoniya
Copy link

leeoniya commented Jul 9, 2019

somewhat unrelated, but raqote's anti-aliasing looks noticeably worse, especially at the horizontal and vertical edge junctions. on the other hand, cairo and QT unnecessarily anti-alias/blend the left vertical edge. cc @jrmuizel

@jonoomph
Copy link
Author

jonoomph commented Jul 9, 2019

Thanks for the info! Let me try integers and see how that works.

@RazrFalcon
Copy link
Owner

RazrFalcon commented Jul 9, 2019

Here is the results with integer numbers:

Qt cairo raqote Inkscape
qt cairo raqote inks

Qt vs Inkscape:

diff

@RazrFalcon
Copy link
Owner

RazrFalcon commented Jul 9, 2019

And with a half-pixel offset:

Qt cairo raqote Inkscape
qt cairo raqote ink

Qt vs Inkscape:

diff

So it all boils down to a specific fractional offset, that is't handled that good by a specific backend.

@jrmuizel
Copy link
Contributor

raqote just uses 4x4 supersampling for it's antialaising. This quite a bit worse than what Cairo does, but is what Skia used for a long time before they switched to sometimes using analytic-aa. I'm not sure what Qt does.

@RazrFalcon
Copy link
Owner

Closing it, since it's not a resvg bug.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants