在 Canvas 中使用三星 S-Pen

Question

我正在开发一个网络应用程序，用户应该能够在平板电脑上签署文档。我们使用 Galaxy Tab 12.2，因为 S-Pen 具有所需的精度。我使用的 canvas 监听 touch 事件以在 canvas.

上绘制

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

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

有没有办法区分 S-Pen 事件和 'normal' 触摸事件？

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

Answer 1

S-Pen 在靠近屏幕时应该触发 onMouseOver 事件（取决于浏览器和 S-Pen 版本），您可以通过存储全局变量 [=11] 来利用这一点=] 并有一个全局 onMouseOver 事件将该变量设置为 true。尝试不同的浏览器，看看哪些浏览器会传送事件，通常常用的浏览器效果最好。

如果这不起作用，您可能需要在应用容器内托管您的网页； Android 有一个 OnHoverListener 可以拿起 S-Pen。您可以使用全屏 WebView 并通过 Android 的 JavaScript 消息 API: Example

与其通信

希望我帮到你了，祝你好运

Answer 2

好的，所以我自己找到了一个运行良好的解决方案。 SPen 使用 radiusX 和 radiusY = 0.

触发 ontouch 事件

用手指触发的事件的半径总是 > 0。所以只需添加

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

进入事件处理程序以利用我的 canvas。

看看这个Jsfiddle

在 Canvas 中使用三星 S-Pen

Using Samsung S-Pen in Canvas

html

javascript

android

canvas