Open abique opened 7 months ago
That's right. Rounded Rectangle
corners aren't antialiased well enough.
SlintPad example (change the circle's size via the handles in the corners).
To compare this with an SVG <circle>
, visit https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle, click "Play" on the circle preview and paste the following JavaScript code to make the circle change its size together with your mouse position:
const svg = document.getElementsByTagName('svg')[0];
const circle = document.getElementsByTagName('circle')[0];
svg.addEventListener('mousemove', function(event) {
const rect = svg.getBoundingClientRect();
const viewBox = svg.viewBox.baseVal;
const scaleX = viewBox.width / rect.width;
const scaleY = viewBox.height / rect.height;
const cx = parseFloat(circle.getAttribute('cx'));
const cy = parseFloat(circle.getAttribute('cy'));
const mouseX = (event.clientX - rect.left) * scaleX;
const mouseY = (event.clientY - rect.top) * scaleY;
const dx = mouseX - cx;
const dy = mouseY - cy;
const newRadius = Math.sqrt(dx * dx + dy * dy);
circle.setAttribute('r', newRadius);
});
I'm having difficulties reproducing this with skia (as @abique originally tagged it as). Running @Enyium 's example with Skia on my desktop (note that Slintpad doesn't use Skia) I get this result:
That looks alright, doesn't it?
In contrast, this is the result with FemtoVG:
This isn't quite as nice as Skia, the quality of the anti-aliasing is not as good.
I'll re-tag this with femtovg as renderer tagged, instead of Skia.
For both renderers we explicitly enable anti-aliasing when drawing rounded rects, so I think if anything this ties to the renderer's anti-aliasing qualities in general.
Yeah, I'm sorry, Skia renders the circle very well in a native Windows 10 window. I can't make out any quality differences to the SVG circle.
Even the software renderer seems on par with Skia in this regard.
FemtoVG circles have lower quality:
Thanks for confirming :)
Did you try with non hi-dpi monitor?
Try rendering to bitmap and compare with what cairo can do.
I think skia can do a 4x oversampling right?
It feels to me that the painting could look better:
Using skia.