在 Canvas 中使用三星 S-Pen答案

【问题标题】：Using Samsung S-Pen in Canvas在 Canvas 中使用三星 S-Pen
【发布时间】：2023-04-09 19:23:01
【问题描述】：

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

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

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

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

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

【问题讨论】：

标签： javascript android html canvas

【解决方案1】：

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

用手指触发的事件的半径总是 > 0。所以要做的就是添加

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

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

看看这个Jsfiddle

【讨论】：

【解决方案2】：

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

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

希望能帮到你，祝你好运

【讨论】：

使用mouseOver 事件是一个非常聪明的主意。我不确定这个解决方案有多可靠。我找到了另一种方法，如果您想查看，我会将其发布为答案