在画布中使用Samsung S-Pen

Using Samsung S-Pen in Canvas

本文关键字：Samsung S-Pen 布中使      更新时间：2024-07-10

我正在开发一个web应用程序，用户应该能够在平板电脑上签署文档。我们使用Galaxy Tab 12.2是因为S-Pen具有所需的精度。我绘制的画布使用侦听要在画布上绘制的touch事件。

        canvas.addEventListener('touchstart', handleStart);
        canvas.addEventListener('touchmove' , handleMove);

这里的问题是，如果用户用手指触摸画布，画布就会在那里划线。

有没有办法区分S-Pen事件和"正常"触摸事件？

我知道在带有Internet Expoler的Surface Pro 3上，我可以处理不同于手指输入的笔输入。

好的，所以我自己找到了一个运行良好的解决方案。SPen在radiusX和radiusY=0的情况下触发ontouch事件。

用手指触发的事件的半径始终大于0。所以所有要做的就是添加

if(e.targetTouches[0].radiusX === 0)

进入事件处理程序，以便在我的画布上绘制。

查看此Jsfidle

S-Pen在靠近屏幕时应该触发onMouseOver事件（取决于浏览器和S-Pen版本），您可以通过存储全局变量isSPen = false并通过全局onMouseOver事件将该变量设置为true来利用这一点。尝试不同的浏览器，看看哪些浏览器会提供活动，通常股票浏览器总是工作得最好。

如果这不起作用，你可能需要将你的网页托管在应用程序容器中；安卓系统有一个OnHoverListener可以接收S-Pen。您可以使用全屏幕WebView，并通过Android的JavaScript消息API与之通信：示例

希望我帮了你，祝你好运

pointerType属性可以通过"pointerdown"事件访问，而不是依赖于"mousedown"事件。

相关文章：