首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在windows触摸屏上,pageX、pageY不会映射到100%画布上的坐标。

在Windows触摸屏上,pageX和pageY是指触摸事件发生时触摸点相对于整个文档页面的坐标。然而,由于Windows触摸屏设备的分辨率和屏幕尺寸的差异,pageX和pageY的坐标值可能无法直接映射到100%画布上的坐标。

这个问题可以通过以下步骤来解决:

  1. 获取触摸事件的pageX和pageY坐标值。
  2. 获取当前设备的屏幕分辨率和触摸屏尺寸。
  3. 计算出触摸点在屏幕上的相对坐标,即相对于屏幕左上角的坐标。
  4. 根据屏幕尺寸和分辨率的比例,将触摸点的相对坐标映射到100%画布上的坐标。

需要注意的是,由于不同设备和浏览器的差异,上述步骤可能需要根据具体情况进行调整和优化。此外,还可以考虑使用其他事件属性或方法来获取更准确的触摸坐标,例如clientX、clientY、screenX、screenY等。

对于Windows触摸屏上的坐标映射问题,腾讯云并没有直接相关的产品或服务。然而,腾讯云提供了丰富的云计算解决方案,包括云服务器、云数据库、云存储等,可以帮助开发者构建稳定、高效的云端应用。您可以访问腾讯云官网(https://cloud.tencent.com/)了解更多相关产品和服务信息。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【如果你要学JS XIV】—— 移动端常用事件-移动端touch触摸事件

1.触摸事件触屏touch事件说明touchstart手指触摸到一个DOM元素时触发touchmove手指在一个DOM元素滑动时触发touchend手指从一个DOM元素移开时触发...触摸列表说明touches正在触摸屏所有手指一个列表targetTouches正在触摸当前DOM元素手指一一个列表changedTouches手指状态发生了改变列表,从无到有,从有到无变化...targetTouches[0] 里面的pageXpageY3.拖动原理:手指移动计算出手指移动距离,然后用盒子原来位置+手指移动距离4.手指移动距离 = 手指滑动中位置 - 手指刚开始触摸位置...[0].pageX; startY = e.targetTouches[0].pageY; // 获取盒子坐标 x = this.offsetLeft...= 手指移动之后坐标 - 手指初始坐标 var moveX = e.targetTouches[0].pageX - startX; var moveY

51400

JavaScript——触屏事件

常见触屏事件如下: 触屏touch事件 说明 touchstart 手指触摸到一个DOM元素时触发 touchmove 手指在一个DOM元素滑动时触发 touchend 手指从一个DOM元素移开时触发...触摸事件对象 TouchEvent是一类描述手指在触摸平面(触摸屏、触摸板等)状态变化事件。...但是拖动元素需要当前手指坐标值我们可以使用targetTouchies[0]里面的pageXpageY 移动端拖动原理:手指移动中,计算出手指移动距离,然后用盒子原来位置+手指移动距离 手指移动距离...startX = e.targetTouches[0].pageX; startY = e.targetTouches[0].pageY; x = this.offsetLeft...: 手指移动之后坐标减去手指初始坐标 var moveX = e.targetTouches[0].pageX - startX; var moveY

2.1K10

JS中touch事件与canvas绘图

需要注意是, 如果这个元素触摸过程中被移除, 这个事件仍然会指向它, 但是不会再冒泡这个事件到 window 或 document 对象....因此, 如果有元素触摸过程中可能被移除, 最佳实践是将触摸事件监听器绑定到这个元素本身, 防止元素被移除后, 无法再从它上一级元素侦测到从该元素冒泡事件....接触点 screenX是相对于屏幕左上角坐标 clientX是相对于窗口可视区左上角坐标 pageX是相对于窗口内页面的左上角坐标(常用) 所以相对于绘制区域坐标可以这样取到 {...,返回鼠标指针相对于文档水平坐标 pageY 触发鼠标事件时,返回鼠标指针相对于文档垂直坐标 screenX 触发事件时,返回鼠标指针相对于屏幕水平坐标 screenY 触发事件时,返回鼠标指针相对于屏幕垂直坐标...devicePixelRatio属性示例 一个 canvas 视网膜屏幕可能显得太模糊。

7.4K41

【实战】Canvas实现图片上标注、缩放、移动和保存历史状态

: MouseEvent) { const downX: number = event.pageX const downY: number = event.pageY // 区分我们现在选择鼠标模式...实现画布移动 这个就比较好办啦,我们只需要利用鼠标按下坐标,和我们拖动距离就可以实现画布移动啦,因为涉及到每次移动都需要计算最新位移距离,我们可以定义几个变量来进行计算。...: number = event.pageX const moveY: number = event.pageY // 更新现在位移距离,值为:一次位移结束坐标+移动距离...null; // 鼠标抬起时候,更新“一次唯一结束坐标” fillStartPointXRef.current = fillStartPointX + (upX - downX)...因为呢,仔细想一下,如果我们缩放位移之后,我们鼠标按下位置,他坐标可能就相对于画布来说会有变化,所以我们需要转换一下才能进行鼠标按下位置与画布位置一一对应效果 稍微总结一下: 传入鼠标按下坐标

5.7K40

第127天:移动端-获取触摸点位置

next':'prev'); 40 41 42 43 } 二、移动端获取触摸点方式说明 1.touchstart事件        手指头触摸屏事件 2.touchmove...       手指头屏幕滑动触发事件 3.touchend         当手指从屏幕离开时候触发 利用jquery配合使用方法如下: $("#demoid").bind('touchstart...[0],所以位置.pageX .pageY就ok了 (2)touchend事件获取:e3.originalEvent.changedTouches[0].pageX 下面是其他一些介绍: 每个Touch...clientX:触摸目标视口中x坐标。 clientY:触摸目标视口中y坐标。 identifier:标识触摸唯一ID。 pageX:触摸目标页面中x坐标。...pageY:触摸目标页面中y坐标。 screenX:触摸目标屏幕中x坐标。 screenY:触摸目标屏幕中y坐标。 target:触目的DOM节点目标。

1.4K20

【JS】928- 用 Canvas 编辑你图片

除此之外,动画,游戏图形,数据可视化,照片处理和实时视频处理都难不倒我噢~ 一、我兼容性(心有多大,舞台就有多大) 大家使用前端技术前可以Can I Use查询一下兼容性噢~ 我就在里面找到了自己呢...(x: 20, y: 20, width: 150, height: 100); // 无填充矩形 ctx.strokeRect(20,20,150,100); 好啦,以上是我基本技能,有兴趣的话可以...MDN WEB查看我全部技能噢~ 回归到需求,我们开发者应该如何使用 canvas 完成需求功能呢?...实践 结合 canvas 技能,方案设计思路如下: 获取适配图片 转换图片:按照图片 1:1 绘制画布 动态编辑:画布上标记操作,可进行增删改 生成图片:画布转换为图片 1、获取并转换图片 drawImage..._h) ); ctx.stroke(); } function mousemove(event) { const x = event.pageX; const y = event.pageY

4.5K50

js实现简易拖拽

document 对象绑定 mousemove 和 mouseup 事件,不在拖拽元素绑定是因为当鼠标移动太快而超出元素范围时会停止拖拽,而绑定在 document 则可以避免这样事情发生。...拖拽再快都不会超出 document 范围。...// 获取元素所在坐标 boxX = box.offsetLeft boxY = box.offsetTop 一般鼠标的位置使用 pageX / pageY 获取,但是 IE 不支持这两个属性。...所以 IE 中使用 event.clientX + document.body.scrollLeft - document.body.clientLeft; 获取鼠标的位置 if (e.pageX)...,Chrome,Opera,Safari中指外边缘,即将该元素边框宽度计算在内,firefox则不包含边框值 pageX,pageY 指相对文档窗口左上角距离,不会随滚动条移动 clientX,clientY

6.3K10

Threejs入门之二十二:Threejs中屏幕坐标转标准设备坐标

标准坐标系我们之所以要进行上面的转换,这是因为Three.js中Canvas画布具有一个标准设备坐标系,该坐标坐标原点在canvas画布中间位置,x轴水平向右,y轴竖直向上。...标准设备坐标坐标值不是绝对值,是相对值,其范围是[-1,1]区间,也就是说canvas画布上任何一个位置坐标,如果用标准设备坐标系来表示,那么坐标的值都是-1到1之间。...pageX:鼠标点击位置相对于网页左上角水平偏移量,也就是 clientX + 水平滚动条滚动距离。...pageY:鼠标点击位置相对于网页左上角垂直平偏移量,也就是 clientY + 垂直滚动条滚动距离。 坐标系上某一个元素pageX/pageY 不会 随着滚动条滚动而改变。...clientX:鼠标点击位置相对于浏览器可视区域水平偏移量(不会计算水平滚动距离)。 clientY:鼠标点击位置相对于浏览器可视区域垂直偏移量(不会计算垂直滚动距离)。

2.1K10

HTML5移动端开发常用触摸事件

触摸事件(touch)会在用户手指放在屏幕上面的时候、屏幕滑动时候或者是从屏幕移开时候出发。...下面具体说明:   touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕也会触发。   touchmove事件:当手指在屏幕滑动时候连续地触发。...clientX:触摸目标视口中x坐标。   clientY:触摸目标视口中y坐标。   identifier:标识触摸唯一ID。   pageX:触摸目标页面中x坐标。   ...pageY:触摸目标页面中y坐标。   screenX:触摸目标屏幕中x坐标。   screenY:触摸目标屏幕中y坐标。   target:触目的DOM节点目标。...pageX/pageX/clientX/clientY/screenX/screenY:一个数值,动作屏幕发生位置(page包含滚动距离,client不包含滚动距离,screen则以屏幕为基准)。

1.6K10

微信小程序单指拖拽和双指缩放旋转

小程序单指拖拽和双指操作是一个比较常用功能,效果如下图 实现这三个功能,主要用三个触摸事件touchstart、touchmove、touchend <view style="height: <em>100</em>vh...0, // 旋转角度 oldRotate: 0, // <em>上</em>一次旋转停止后<em>的</em>角度 startMove: { // 起始位移距离 x: 0, y: 0, },...startTouches: [] // 起始点touch数组 }, }) 单指拖拽 单指拖拽比较简单,只需要记录移动<em>的</em>点<em>坐标</em>,然后减去起始点<em>坐标</em>,就可以求出针对页面的移动距离 touchstart...== 2这个判断<em>的</em>原因是防止图片跳动,因为如果你两个手指触摸,然后离开一个手指,我是禁止拖拽<em>的</em>,只有双指都离开后再次触摸才能单指拖拽 双指旋转 双指旋转<em>的</em>原理是根据三角函数求出起始点<em>的</em>角度,然后再求出移动<em>坐标</em>的角度...,相减然后加上<em>上</em>一次旋转<em>的</em>角度就等于你当前所需<em>的</em>选择角度 touchmove touchMove(e) { const touches = e.touches const { <em>pageX</em>: onePageX

2.4K31

从0到1开发可视化拖拽H5编辑器(React)

拖拽组件 画布组件需要是可拖拽,通过拖拽控制位置,这个时候其实就是获取x与y轴移动距离,那么只需要用这次位置减去初始值位置就可以了。...e.pageY; e.dataTransfer.setData("startPos", JSON.stringify({pageX, pageY})); }; 画布drop事件,这个时候需要判断是新增还是已有组件拖拽变化为止...- startPos.pageX; let disY = e.pageY - startPos.pageY; // 获取当前选中组件最新信息 const selectedCmp...,有些组件会被覆盖掉,那么但从画布就没法选中被覆盖掉组件,这个时候可以通过右键出现菜单查看所有组件,鼠标停留,则会显示对应组件,点击的话则有选中功能。...修改画布数据以及组件数据时候执行this.recordCanvasChangeHistory()函数记录下历史即可。

2.4K50

JavaScript 编程精解 中文第三版 十五、处理事件

pageXpageY,它们相对于整个文档左上角(当窗口被滚动时可能不同)。 下面的代码实现了简单绘图程序。每次点击文档时,会在鼠标指针下添加一个点。...触摸屏与鼠标的工作方式不同:它没有多个按钮,当手指不在屏幕时不能跟踪手指(来模拟"mousemove"),并且允许多个手指同时屏幕。...由于许多触摸屏可以同时检测多个手指,这些事件没有与其关联一组坐标。...相反,它们事件对象拥有touches属性,它拥有一个类数组对象,每个对象都有自己clientX,clientY,pageXpageY属性。 你可以这样,每个触摸手指周围显示红色圆圈。...实际,事件处理器是进行滚动之后才触发。 焦点事件 当元素获得焦点时,浏览器会触发其focus事件。当失去焦点时,元素会获得blur事件。 与前文讨论事件不同,这两个事件不会传播。

5.5K20

通过canvas画板学习PointerEvent、MouseEvent和TouchEvent

最近想开发个草稿纸功能, 所以学习了下canvas实现简单画板功能, 但是我们知道PC端我们可以用MouseEvent来监听我们鼠标点按相关操作, 移动端可以使用TouchEvent来监听我们手指触摸相关操作...但是别忘了, 还存在PointerEventer, 它可以监听鼠标, 手指触摸以及触摸笔, 支持多点触控, 它还有个特殊参数, 即压感, 压感屏可以获取获取压感笔压感值, 只要根据压感值, 我们可以控制笔画粗细..., 浏览器缩放等事件, 这时候需要给画布设置touch-action: none;样式, 来设置当触控事件发生在元素时,不进行任何操作 因为我们需要实时根据压感来设置笔画粗细, 所以每一次移动都作为一个路径起始和结束..., 当然这样的话我们需要记录每次移动最终坐标, pointermove事件再次触发时候, 将坐标移动到上一次结束坐标处, 这样保证了笔画连续性 /** * @description...中, 达到此功能 清屏功能就相对简单, 可以使用canvasclearRect来将画布清空 ctx.clearRect(0, 0, canvas.width, canvas.height) 效果

1.6K30

医疗数字阅片-医学影像-cornerstone-core-Cornerstone.js-Cornerstone Examples-基石实例-

以下示例应在任何支持HTML5 canvas元素浏览器运行。 当前,我们建议使用Chrome进行开发并获得最佳最终用户体验。...这是调整启用图像大小示例 当启用元素宽度或高度更改时,必须调用resize(),以便Corneronate可以更新画布宽度和高度。图像将自动重新缩放。...本例中,可以通过鼠标滚轮或屏幕按钮更改缩放。平移是通过鼠标左键单击拖动完成。请注意,核心基石库没有指定任何交互范式,并且允许开发人员实现任何交互范式 ? <!...该事件包括设置为图像坐标画布上下文,以便您可以绘制覆盖。...这是一个一页显示两张mr图像和一张ct图像例子。注意,本例中使用了两个不同imageId插件-一个用于mr图像,另一个用于ct图像。 ? <!

1.9K41
领券