欣赏器触摸屏概述
欣赏器触摸屏信息主要是指欣赏器可以检测并响应用户在触摸屏装备上进行的触摸操纵。随着移动装备和触摸屏装备的普及，触摸事件（Touch Events）变得越来越紧张。欣赏器通过触摸事件 API 提供对触摸屏操纵的支持，使开发者可以或许创建更加互动和响应的用户体验。
触摸事件 API 提供了一系列事件，用于检测和处理触摸操纵。这些事件包罗：
- touchstart：当一个或多个手指触摸屏幕时触发。
- touchmove：当一个或多个手指在屏幕上移动时触发。
- touchend：当一个或多个手指从屏幕上移开时触发。
- touchcancel：当触摸被中断时触发，如忽然接听电话或欣赏器上下文改变。
每个触摸事件对象包罗有关当前触摸状态的详细信息。关键属性包罗：
- touches：一个 TouchList 对象，包罗当前在屏幕上的所有手指的触摸信息。
- targetTouches：一个 TouchList 对象，包罗当前与事件目的相干的所有手指的触摸信息。
- changedTouches：一个 TouchList 对象，包罗自上一个触摸事件以来发生了变革的所有手指的触摸信息。
每个 Touch 对象包罗以部属性：
- identifier：唯一标识触摸点的 ID。
- target：触摸点的事件目的元素。
- clientX 和 clientY：触摸点相对于欣赏器窗口的 X 和 Y 坐标。
- screenX 和 screenY：触摸点相对于屏幕的 X 和 Y 坐标。
- pageX 和 pageY：触摸点相对于文档的 X 和 Y 坐标。
以下是一个HTML示例，展示如何利用 JavaScript 处理触摸事件：
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Touch Event Example</title>
- <style>
- #touchArea {
- width: 300px;
- height: 300px;
- background-color: lightgray;
- border: 2px solid black;
- text-align: center;
- line-height: 300px;
- }
- </style>
- </head>
- <body>
- <div id="touchArea">Touch here</div>
- <script>
- const touchArea = document.getElementById('touchArea');
- touchArea.addEventListener('touchstart', function(event) {
- handleTouchEvent(event, 'touchstart');
- });
- touchArea.addEventListener('touchmove', function(event) {
- handleTouchEvent(event, 'touchmove');
- });
- touchArea.addEventListener('touchend', function(event) {
- handleTouchEvent(event, 'touchend');
- });
- touchArea.addEventListener('touchcancel', function(event) {
- handleTouchEvent(event, 'touchcancel');
- });
- function handleTouchEvent(event, eventType) {
- event.preventDefault();
- const touches = event.touches;
- const touchList = [];
- for (let i = 0; i < touches.length; i++) {
- touchList.push({
- identifier: touches[i].identifier,
- clientX: touches[i].clientX,
- clientY: touches[i].clientY,
- });
- }
- console.log(`Event: ${eventType}`, touchList);
- }
- </script>
- </body>
- </html>
在上述监听事件当中，通过 getElementById 获取触摸地区元素。为 touchArea 添加了 touchstart、touchmove、touchend 和 touchcancel 事件监听器，分别处理差别范例的触摸事件。
在 handleTouchEvent 中，起首调用 event.preventDefault 防止默认行为（如滚动）。然后从事件对象中提取 touches 列表，并遍历此中的每个触摸点，提取 identifier、clientX 和 clientY 属性。最后将触摸点信息存储在 touchList 数组中，并在控制台中输出触摸事件范例和触摸点信息。
触摸屏在欣赏器中的用途非常多，开发者可以利用触摸事件来实现多点触控手势，如缩放、旋转和滑动。而且触摸事件可以用于绘图应用，允许用户在触摸屏上绘制和编辑图像。
如果想要将欣赏器模拟为移动端的指纹信息，那么就需要开启此中的触摸屏。因为在移动端，欣赏器作为一个APP，是需要用户通过触摸屏操纵的，是没有外接鼠标键盘的。如果要模拟移动端指纹，却不开启触摸屏，那么很容易就被检测为在伪造指纹信息。
欣赏器触摸屏支持检测
欣赏器是否支持触摸屏可以通过多种函数进行检测。以下是几种常见的检测：
- 利用 navigator.maxTouchPoints。
navigator.maxTouchPoints 属性返回装备上可用的触控点数量。如果装备支持触摸屏，则返回值大于 0。代码如下：
- function isTouchDevice() {
- return 'maxTouchPoints' in navigator && navigator.maxTouchPoints > 0;
- }
- console.log("Is touch device: " + isTouchDevice());
- function isTouchDevice() {
- return window.matchMedia("(pointer: coarse)").matches;
- }
- console.log("Is touch device: " + isTouchDevice());
- function isTouchDevice() {
- return 'ontouchstart' in window || navigator.maxTouchPoints > 0;
- }
- console.log("Is touch device: " + isTouchDevice());
欣赏器触摸屏指纹定制
本书将定制欣赏器触摸屏信息navigator.maxTouchPoints。因为这是一个涉及动作的操纵，所以在Chromium源码中相干代码在src\third_party\blink\renderer\core\events文件夹中，在这个文件夹中，navigator_events.cc文件中单独界说了这个API，它的的具体代码如下：
- int32_t NavigatorEvents::maxTouchPoints(Navigator& navigator) {
- LocalDOMWindow* window = navigator.DomWindow();
- return window ?
- window->GetFrame()->GetSettings()->GetMaxTouchPoints() : 0;
- }
在函数内部，起首调用 navigator.DomWindow 获取一个指向 LocalDOMWindow 对象的指针，并赋值给window变量，这个window变量表示当前的欣赏器窗口。然后通过条件运算符 ? : 判断这个指针是否为空。如果 window 变量非空，就通过一系列函数调用来获取最大触摸点数：起首通过GetFrame函数获取当前窗口的，接着通过GetSettings函数获取与当前窗口相干联的设置，最后通过GetMaxTouchPoints函数获取最大触摸点数。如果 wi-ndow 为空，则直接返回 0。
这段代码的功能是检测当前欣赏器窗口的最大触摸点数，如果窗口存在，通过窗口的框架和设置获取这个值；如果窗口不存在，则返回 0。这样的函数通常用于触控装备的功能检测，根据装备支持的触摸点数调整应用的触控交互方式。例如，在支持多点触控的装备上启用多点触控手势，而在不支持触摸的装备上禁用这些功能。这个函数确保了程序可以或许根据装备的硬件能力进行适当的调整。
在对欣赏器触摸屏信息进行定制的时候，只需要将maxTouchPoints函数的返回值定制为1，即分析欣赏器支持触摸屏，具体修改代码如下：
- bool mobile = *(json_reader->GetDict().FindBool("mobile"));
- if (mobile) {
- return 1;
- }
- return 0;
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
