unitrongroup-ir commented on issue #13504:
URL: https://github.com/apache/echarts/issues/13504#issuecomment-6024706433
We ran into this with a chart full of 1px ticks and measured it in Chrome at
device pixel ratios 1.25 / 1.5 / 1.75, i.e. Windows scaling 125/150/175%
(echarts 6.1.0). The canvas bitmap itself was crisp, the blur came from the
browser resampling it. We found two reasons for that:
1. Size. zrender takes the size from `clientWidth`/`clientHeight` (whole CSS
px) and the bitmap is `width * dpr` truncated. E.g. 1013 px at 1.5 is 1519.5
device px on screen, but the bitmap has 1519. Passing a fractional width to
`resize({ width })` doesn't help by itself, because Blink lays sizes out in
1/64 px and cuts it again (1013.6008 px became 1013.59375 px). What worked was
a width that is both a whole number of device px and a multiple of 1/64 CSS px
(at 1.25 that's every 5th device px), passed to `init`/`resize` together with
the height.
2. Position. It looks like Chrome paints the canvas at its layout position
rounded to whole CSS px and only then scales it, so at 125% a chart at x =
345px starts at device pixel 431.25. Moving the chart's container by the
remainder with a CSS `transform` fixed it. Doing the same with `left`/`top`
didn't, those get rounded again.
Also `devicePixelRatio` is read only once when zrender loads, so after a
browser zoom the chart keeps the old ratio (#21386). Passing `devicePixelRatio`
to `init` and creating the chart again when it changes works.
With all of that, the number of blurred pixels in one row of our chart went
from 45 / 39 / 28 (125% / 150% with an odd width / 175%) to 0. Would be great
if zrender sized the canvas in whole device pixels on its own, that's the part
that can be fixed inside the library.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
