|
Posted by: stak
Tags: mozilla
Posted on: 2012-04-26 22:32:41
One of the things I've been working on for the last while is the integration between the Fennec front-end and the core graphics APIs. One of the main problems in this kind of work is having to deal with multiple different coordinate systems and units of measurement. For coordinate systems, we have:
- the page, which is the area determined by the content being rendered
- the screen, which is determined by the physical hardware the user has
- the viewport, which is the part of the page the user sees on the screen
- the displayport, which is the area Gecko is actually rendering to graphics buffers
- the CSS viewport, which is the base relative to which some content dimensions are calculated
For units of measurements, we have:
- device pixels, whose size is fixed by the hardware
- CSS pixels, which can grow or shrink relative to device pixels depending on the zoom
- app units, which are what Gecko uses internally for layout calculations, and are 1/60 of a CSS pixel
With all these different frames of reference and units of measurement it sometimes gets pretty hard to keep it all straight. As a tool to help me visualize this, I wrote a simple SVG file that lets me quickly simulate certain behaviours. The SVG file shows a device overlaid on top of a screenshot of CNN.com, and allows you to drag around the device so that you can see how the viewport and displayport might change. It also allows you to simulate zooming in and out (using the '-' and '+' keys) and asynchronous panning (use 'p' to pin/unpin the displayport).
You can find the SVG file here (warning: it loads a ~1.5MB CNN screenshot). Feel free to play around with it, or hack it up to suit your own needs!
|
|
(c) Kartikaya Gupta, 2004-2024. User comments owned by their respective posters. All rights reserved.
You are accessing this website via IPv4. Consider upgrading to IPv6!
|