[prev in list] [next in list] [prev in thread] [next in thread]
List: cairo
Subject: Re: Implementing HiDpi scaling
From: Federico Angelilli <list () fedang ! net>
Date: 2024-03-20 13:32:58
Message-ID: 65B03E28-89E7-45F5-94CE-B706BFD71919 () fedang ! net
[Download RAW message or body]
Thank you very much for the breakdown, I totally missed that cairo feature.
Am I right into thinking that the logical pixels don't need any calculation (apart from when comparing \
them to pixel information from X, like you said)? So that I just need to change the click handling and \
surface creation code
Also, should the size of the surface be (digital * ratio)? So the whole things looks like
1) get ratio from the monitor
2) create surface with size (digital * ratio)
3) set cairo device scale to (ratio)
4) write normally with digital
5) handle x11 events as (device / ratio)
Did I understood everything correctly?
Regards
On March 20, 2024 1:03:06 PM GMT+01:00, Emmanuele Bassi <ebassi@gmail.com> wrote:
> The way "high DPI" support is implemented is typically this:
>
> - You retrieve the scaling factor from the windowing system; in the case of
> X11 you can deduce the scaling factor from the ratio between the width and
> the height of the target monitor: anything below 192 is generally
> considered "1" and anything above is generally considered "2". If you want
> to go into fractional scaling territory, you'll likely need some other
> mechanism, like a user configuration setting.
> - Once you have a scaling factor, you create a windowing system surface
> that has two units:
> 1. device pixels, which are the physical pixels on the monitor
> 2. logical pixels, which are the scaled pixels for drawing operations
>
> Your surfaces have to be created with the size in device pixels; then you
> call cairo_surface_set_device_scale() with the scaling factor you computed:
>
> https://www.cairographics.org/manual/cairo-cairo-surface-t.html#cairo-surface-set-device-scale
>
> After that, every drawing operation must be in **logical** pixels, and the
> Cairo will automatically scale every coordinate and size appropriately.
>
> It is your responsibility to deal with device and logical coordinates; for
> instance, windowing system events will be in device coordinates, but if
> you're exposing their information to other code you will need to scale them
> appropriately.
>
> Ciao,
> Emmanuele.
>
> On Wed, 20 Mar 2024 at 11:47, Federico Angelilli <list@fedang.net> wrote:
>
> > Hello,
> > Sorry for the late reply.
> >
> > I am using cairo for drawing and pango for the text. I am creating a
> > window with xcb and using cairo_xcb_surface.
> >
> > I can easily extract the dpi information from the xrandr api calls. Now
> > that I have this ratio, I have to use it somewhere to scale my canvas
> > appropriately.
> >
> > I will try using cairo_scale, and should I also scale the size of the
> > xcb_surface by the same ratio?
> >
> > Anyway my main concern about antialising is that since I am making layered
> > shapes (think buttons) the border and the background will not match up
> > pixel perfect (which is something that I have seen in other project using
> > cairo).
> >
> > Does what I described about scaling the surface makes sense or am I
> > misinterpreting cairo_scale?
> >
> > Regards
> >
> > Ps:
> > I will soon try and post the results
> >
> >
> > On March 18, 2024 1:46:54 PM GMT+01:00, Dov Grobgeld <
> > dov.grobgeld@gmail.com> wrote:
> >
> > > I think that you should describe in detail what you expect.
> > >
> > > In pure vector graphics a contour may cut through a pixel and partially
> > > obscure it, and it is then the responsibility of the graphics engine to
> > > create anti-aliased graphics by mixing the colors of the background and the
> > > foreground. As a user you typically don't need to concern yourself with
> > > that as it is done automatically.
> > >
> > > However, e.g. for text this may cause "fuzzy" characters and the engine
> > > will then fallback to moving the contours and scale the font so that the
> > > glyphs fall on whole pixels.
> > >
> > > Note that the use of anti-aliased graphics is less needed, and less
> > > visible, for an HDPI device.
> > >
> > > In any case all that you will typically need is cairo_scale() as Uli
> > > Shlachter already described.
> > >
> > > Try it!
> > >
> > > Regards,
> > >
> > >
> > > On Sun, Mar 17, 2024 at 12:46 PM Federico Angelilli <list@fedang.net>
> > > wrote:
> > >
> > > > Hi
> > > >
> > > > Will cairo_scale make a pixel perfect image for non integer scales? To
> > > > my understanding the scale matrix will be multiplied to all the coordinates
> > > > scaling the coordinates appropriately. Should I also scale the whole
> > > > surface by that same factor?
> > > >
> > > > Regards
> > > >
> > > >
> > > > On March 16, 2024 6:27:56 PM GMT+01:00, Uli Schlachter <psychon@znc.in>
> > > > wrote:
> > > >
> > > > > Hi
> > > > >
> > > > > Am 14.03.24 um 16:34 schrieb fedang:
> > > > >
> > > > > > Hello all,
> > > > > >
> > > > > > I am writing a small X11 app using cairo as the drawing backend. I was wondering if and how \
> > > > > > to implement fractional scaling to accommodate high dpi screens. After searching online I \
> > > > > > found almost nothing, so here I am.
> > > > > > Can someone give me some pointers on what to do? I can get a scale factor for the screens \
> > > > > > (depending on the size) but I have no idea how to actually use it in the draw code.
> > > > > >
> > > > >
> > > > > I'm not sure if I understand the question. You can use cairo_scale() to set a scale factor for \
> > > > > all drawing. So I would say that you can just apply the scale factor with cairo_scale() before \
> > > > > drawing.
> > > > > Of course, this assumes that you don't use cairo_identity_matrix() or cairo_set_matrix() in \
> > > > > your drawing. Instead, cairo_save() and cairo_restore() should be used around temporary \
> > > > > modifications of the transformations.
> > > > > Cheers,
> > > > > Uli
> > > > >
> > > > >
>
> --
> https://www.bassi.io
> [@] ebassi [@gmail.com]
[Attachment #3 (text/html)]
<html><head></head><body><div dir="auto">Thank you very much for the breakdown, I totally missed that \
cairo feature.<br><br>Am I right into thinking that the logical pixels don't need any calculation (apart \
from when comparing them to pixel information from X, like you said)? So that I just need to change the \
click handling and surface creation code<br><br>Also, should the size of the surface be (digital * \
ratio)? So the whole things looks like<br><br>1) get ratio from the monitor<br>2) create surface with \
size (digital * ratio)<br>3) set cairo device scale to (ratio)<br>4) write normally with digital<br>5) \
handle x11 events as (device / ratio)<br><br>Did I understood everything \
correctly?<br><br>Regards<br></div><br><br><div class="gmail_quote"><div dir="auto">On March 20, 2024 \
1:03:06 PM GMT+01:00, Emmanuele Bassi <ebassi@gmail.com> wrote:</div><blockquote \
class="gmail_quote" style="margin: 0pt 0pt 0pt 0.8ex; border-left: 1px solid rgb(204, 204, 204); \
padding-left: 1ex;"> <div dir="ltr"><div>The way "high DPI" support is implemented is typically \
this:</div><div><br></div><div>- You retrieve the scaling factor from the windowing system; in the case \
of X11 you can deduce the scaling factor from the ratio between the width and the height of the target \
monitor: anything below 192 is generally considered "1" and anything above is generally considered "2". \
If you want to go into fractional scaling territory, you'll likely need some other mechanism, like a user \
configuration setting.<br></div><div>- Once you have a scaling factor, you create a windowing system \
surface that has two units:</div><div> 1. device pixels, which are the physical pixels on the \
monitor</div><div> 2. logical pixels, which are the scaled pixels for drawing \
operations</div><div><br></div><div>Your surfaces have to be created with the size in device pixels; then \
you call cairo_surface_set_device_scale() with the scaling factor you \
computed:</div><div><br></div><div><a \
href="https://www.cairographics.org/manual/cairo-cairo-surface-t.html#cairo-surface-set-device-scale">http \
s://www.cairographics.org/manual/cairo-cairo-surface-t.html#cairo-surface-set-device-scale</a></div><div><br></div><div>After \
that, every drawing operation must be in **logical** pixels, and the Cairo will automatically scale every \
coordinate and size appropriately.</div><div><br></div><div>It is your responsibility to deal with device \
and logical coordinates; for instance, windowing system events will be in device coordinates, but if \
you're exposing their information to other code you will need to scale them \
appropriately.<br></div><div><br></div><div>Ciao,</div><div> Emmanuele.<br></div></div><br><div \
class="gmail_quote"><div dir="ltr" class="gmail_attr">On Wed, 20 Mar 2024 at 11:47, Federico Angelilli \
<<a href="mailto:list@fedang.net">list@fedang.net</a>> wrote:<br></div><blockquote \
class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid \
rgb(204,204,204);padding-left:1ex"><div><div dir="auto">Hello,<br>Sorry for the late reply.<br><br>I am \
using cairo for drawing and pango for the text. I am creating a window with xcb and using \
cairo_xcb_surface.<br><br>I can easily extract the dpi information from the xrandr api calls. Now that I \
have this ratio, I have to use it somewhere to scale my canvas appropriately.<br><br>I will try using \
cairo_scale, and should I also scale the size of the xcb_surface by the same ratio?<br><br>Anyway my main \
concern about antialising is that since I am making layered shapes (think buttons) the border and the \
background will not match up pixel perfect (which is something that I have seen in other project using \
cairo).<br><br>Does what I described about scaling the surface makes sense or am I misinterpreting \
cairo_scale?<br><br>Regards<br><br>Ps:<br>I will soon try and post the results <br></div><br><br><div \
class="gmail_quote"><div dir="auto">On March 18, 2024 1:46:54 PM GMT+01:00, Dov Grobgeld <<a \
href="mailto:dov.grobgeld@gmail.com" target="_blank">dov.grobgeld@gmail.com</a>> \
wrote:</div><blockquote class="gmail_quote" style="margin:0pt 0pt 0pt 0.8ex;border-left:1px solid \
rgb(204,204,204);padding-left:1ex"> <div dir="ltr"><div class="gmail_default" \
style="font-family:arial,helvetica,sans-serif">I think that you should describe in detail what you \
expect.</div><div class="gmail_default" style="font-family:arial,helvetica,sans-serif"><br></div><div \
class="gmail_default" style="font-family:arial,helvetica,sans-serif">In pure vector graphics a contour \
may cut through a pixel and partially obscure it, and it is then the responsibility of the graphics \
engine to create anti-aliased graphics by mixing the colors of the background and the foreground. As a \
user you typically don't need to concern yourself with that as it is done automatically.</div><div \
class="gmail_default" style="font-family:arial,helvetica,sans-serif"><br></div><div class="gmail_default" \
style="font-family:arial,helvetica,sans-serif">However, e.g. for text this may cause "fuzzy" characters \
and the engine will then fallback to moving the contours and scale the font so that the glyphs fall on \
whole pixels.</div><div class="gmail_default" \
style="font-family:arial,helvetica,sans-serif"><br></div><div class="gmail_default" \
style="font-family:arial,helvetica,sans-serif">Note that the use of anti-aliased graphics is less needed, \
and less visible, for an HDPI device.</div><div class="gmail_default" \
style="font-family:arial,helvetica,sans-serif"><br></div><div class="gmail_default" \
style="font-family:arial,helvetica,sans-serif">In any case all that you will typically need is \
cairo_scale() as Uli Shlachter already described. <br></div><div class="gmail_default" \
style="font-family:arial,helvetica,sans-serif"><br></div><div class="gmail_default" \
style="font-family:arial,helvetica,sans-serif">Try it!</div><div class="gmail_default" \
style="font-family:arial,helvetica,sans-serif"><br></div><div class="gmail_default" \
style="font-family:arial,helvetica,sans-serif">Regards,</div><div class="gmail_default" \
style="font-family:arial,helvetica,sans-serif"><br></div></div><br><div class="gmail_quote"><div \
dir="ltr" class="gmail_attr">On Sun, Mar 17, 2024 at 12:46 PM Federico Angelilli <<a \
href="mailto:list@fedang.net" target="_blank">list@fedang.net</a>> wrote:<br></div><blockquote \
class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid \
rgb(204,204,204);padding-left:1ex"><div><div dir="auto">Hi<br><br>Will cairo_scale make a pixel perfect \
image for non integer scales? To my understanding the scale matrix will be multiplied to all the \
coordinates scaling the coordinates appropriately. Should I also scale the whole surface by that same \
factor?<br><br>Regards</div><br><br><div class="gmail_quote"><div dir="auto">On March 16, 2024 6:27:56 PM \
GMT+01:00, Uli Schlachter <<a href="mailto:psychon@znc.in" target="_blank">psychon@znc.in</a>> \
wrote:</div><blockquote class="gmail_quote" style="margin:0pt 0pt 0pt 0.8ex;border-left:1px solid \
rgb(204,204,204);padding-left:1ex"> <pre><div dir="auto">Hi<br><br>Am 14.03.24 um 16:34 schrieb \
fedang:<br></div><blockquote class="gmail_quote" style="margin:0pt 0pt 1ex 0.8ex;border-left:1px solid \
rgb(114,159,207);padding-left:1ex"><div dir="auto">Hello all,<br><br>I am writing a small X11 app using \
cairo as the drawing backend. I was wondering if and how to implement<br>fractional scaling to \
accommodate high dpi screens. After searching online I found almost nothing, so here I am.<br><br>Can \
someone give me some pointers on what to do? I can get a scale factor for the screens (depending on the \
size)<br>but I have no idea how to actually use it in the draw code.<br></div></blockquote><div \
dir="auto"><br>I'm not sure if I understand the question. You can use cairo_scale() to set a scale factor \
for all drawing. So I would say that you can just apply the scale factor with cairo_scale() before \
drawing.<br><br>Of course, this assumes that you don't use cairo_identity_matrix() or cairo_set_matrix() \
in your drawing. Instead, cairo_save() and cairo_restore() should be used around temporary modifications \
of the transformations.<br><br>Cheers,<br>Uli<br></div></pre></blockquote></div></div></blockquote></div> \
</blockquote></div></div></blockquote></div><br clear="all"></blockquote></div></body></html>
[prev in list] [next in list] [prev in thread] [next in thread]
Configure |
About |
News |
Add a list |
Sponsored by KoreLogic