Blink Coordinate Spaces
Blink Coordinate Spaces
Blink Coordinate Spaces![]() Types of ZoomThere are two types of zoom in Chromium: Browser Zoom and Pinch-Zoom. Browser zoom is what you get by using Ctrl+/- or the zoom buttons in the
![]() Pinch-zoom is activated by using a pinch gesture on a touchscreen. It scales the surface the web page is rendered onto and so it does not cause a relayout of the page. Throughout Blink, Pinch-zoom is referred to as “Page Scale”.
Types of PixelsPhysical Pixels: These are the actual pixels on the monitor or screen. Device Independent Pixels (DIPs): Modern devices sport high density displays (e.g. Apple’s Retina). In order to keep the UI at a comfortably readable size we scale it up based on the density of the display. This scaling factor is called the device pixel ratio in web APIs and device scale factor in Chromium code. A UI will always be the same size in DIPs regardless of how many pixels are actually used to display it. To go from physical pixels to DIPs we divide the physical pixel dimensions by the device scale factor.
CSS pixels: CSS defines its own pixel type that is also independent of physical pixels. When there is no Browser-Zoom or Pinch-Zoom applied, CSS pixels and DIPs are equivalent. However, browser zoom can make CSS pixels bigger or smaller relative to DIPs. You may come across the term un-zoomed CSS pixel below and in code. This refers to the fact that these pixels do not have browser zoom applied (but they do have pinch-zoom applied). I.e. Converting from frame-space (which is in un-zoomed CSS pixels) to Viewport using something like FrameView::frameToViewport will not apply the browser zoom.
A note about --use-zoom-for-dsf
The --use-zoom-for-dsf flag is used to have Blink use CSS based browser-zoom (the same kind as applied by Ctrl+/-) for screen-density based UI scaling. When this flag is passed, Blink doesn't scale anything using the device scale factor (and ensures it's set to 1) and instead boosts the page zoom factor by the requested amount.
This flag is currently shipped on all Aura platforms (ChromeOS, Linux, Windows), work is ongoing to bring it to Android, and remains unshipped on Mac.
Coordinate SpacesNote that the conversion methods between these spaces do not apply browser zoom. To go from CSS pixels to Document Content, FrameView Content, or Frame space you must first multiply by the browser-zoom scale factor.
Document
The coordinate space of the current FrameView's document content, in un-zoomed CSS pixels. The origin is the top left corner of the Frame’s document content. In Web/Javascript APIs this is referred to as "page coordinates" (e.g. MouseEvent.pageX) though there it is in CSS pixels (i.e. browser zoom applied). Because coordinates in this space are relative to the document origin, scrolling the frame will not affect coordinates in this space.
Frame
The coordinate space of the current FrameView in un-zoomed CSS pixels. The origin is the top left corner of the frame. Therefore, scrolling the frame will change the "frame-coordinates" of elements on the page. This is the same as document coordinates except that Frame coordinates take the Frame’s scroll offset into account. In Web/Javascript APIs this is referred to as "client coordinates" (e.g. MouseEvent.clientX) though there it is in CSS pixels (i.e. browser zoom applied).
Root Frame
The Frame coordinates of the top level (i.e. main) frame. This frame contains all the other child frames (e.g. elements create frames on a page).
(Visual) Viewport
The coordinate space of the visual viewport as seen by the user, in DIPs. The origin is at the top left corner of the browser view (Window or Screen). The difference between Viewport and RootFrame is the transformation applied by pinch-zoom. This is generally what you'd use to display something relative to the user's Window or Screen.
Screen
The final screen space on the user's device, relative to the top left corner of the screen (i.e. if we're in a Window, this will include the window's offset from the top left of the screen). Note that this is in DIPs rather than physical pixels.
Web-exposed input co-ordinate spacesTo see exactly how some of the above co-ordinate spaces are exposed to JavaScript in input events see https://rbyers.github.io/inputCoords.html.
|
Blink Coordinate Spaces的更多相关文章
- Input Team
The Chromium Input team (aka input-dev) is a web platform team focused on making touch (P1) and othe ...
- Layout Team
The layout team is a long-term engineering team tasked with maintaining, supporting, and improving t ...
- OpenCASCADE Coordinate Transforms
OpenCASCADE Coordinate Transforms eryar@163.com Abstract. The purpose of the OpenGL graphics process ...
- OpenCASCADE Camera
OpenCASCADE Camera eryar@163.com Abstract. OpenCASCADE introduce a new class Graphic3d_Camera for th ...
- 孙鑫MFC学习笔记11:保存图像
1.CPtrArray指针数组 2.CPtrArray返回void指针,需要做类型转换 3.View类中的OnPaint调用OnPrepareDC和OnDraw,如果覆盖OnPaint,就不会调用On ...
- golang.org/x/mobile/exp/gl/glutil/glimage.go 源码分析
看这篇之前,建议先看之前几篇,这几篇是基础. Go Mobile 例子 basic 源码分析 http://www.cnblogs.com/ghj1976/p/5183199.html OpenGL ...
- 图形变幻矩阵 Transforms
https://developer.apple.com/library/mac/documentation/GraphicsImaging/Conceptual/drawingwithquartz2d ...
- Foundations of Game Engine Development Volume 1 Mathematics (Eric Lengyel 著)
http://www.foundationsofgameenginedev.com/ Chapter1 Vectors and Matrices (已看) Chapter2 Transforms (已 ...
- Game Engine Architecture 6
[Game Engine Architecture 6] 1.Data-Parallel Computations A GPU is a specialized coprocessor designe ...
随机推荐
- Android webView 缓存 Cache + HTML5离线功能 解决
时间 -- :: CSDN博客 原文 http://blog.csdn.net/moubenmao/article/details/9076917 主题 Android HTML5 WebView的缓 ...
- Document properties
http://devnet.kentico.com/docs/7_0/devguide/index.html?document_properties_overview.htm You can edit ...
- kafka 0.11 spark 2.11 streaming例子
""" Counts words in UTF8 encoded, '\n' delimited text received from the network every ...
- nyoj--891--找点(贪心)
找点 时间限制:2000 ms | 内存限制:65535 KB 难度:2 描述 上数学课时,老师给了LYH一些闭区间,让他取尽量少的点,使得每个闭区间内至少有一个点.但是这几天LYH太忙了,你们帮 ...
- RAC连接时的2种方式Connect Time Failver和taf
1. Client-side Connect Time Failover 在客户端的tnsname中配置多个地址,当用户连接时会按照次序尝试各个地址,直到连接成功,连接好后,不再检测地址是否可用,如 ...
- BZOJ 2045 容斥原理
思路: 同BZOJ 2005 http://blog.csdn.net/qq_31785871/article/details/54314774 //By SiriusRen #include < ...
- (转载)Android引导界面实现
Android引导界面实现 Android 2014-07-10 14:47:36 发布 您的评价: 4.0 收藏 3收藏 ViewPager类提供了多界面切换的新效果,是 ...
- 【算法】prim算法(最小生成树)(与Dijkstra算法的比较)
最小生成树: 生成树的定义:给定一个无向图,如果它的某个子图中任意两个顶点都互相连通并且是一棵树,那么这棵树就叫做生成树.(Spanning Tree) 最小生成树的定义:在生成树的基础上,如果边上有 ...
- 启动tomcat运行maven工程报错:Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:2.3.2:
控制台报错信息:
- 路飞学城Python-Day17
[1.编程范式] 1.面向过程编程 2.面向对象编程 [2.面向过程编程] 面向过程:核心就是过程 什么是过程? 过程指的是解决问题的步骤,先做什么,在作什么,面向过程就像是设计一个流水线,是一种 ...