在 Canvas 中使用三星 S-Pen [英] Using Samsung S-Pen in Canvas

问题描述

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

I am working on a web application where the user should be abled to sign a document on a tablet. We use the Galaxy Tab 12.2 because the S-Pen has the desired precision. The canvas where i draw on uses listens to the touch events to draw on the canvas.

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

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

The problem here is, that if the user touches the canvas with his fingers, the canvas will draw lines there.

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

Is there a way to differentiate between S-Pen events and 'normal' touch events?

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

I know that on the Surface Pro 3 with Internet Expoler I can handle Pen input different from finger input.

推荐答案

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

Ok so i found a solution myself that is working pretty well. The SPen fires an ontouch event with radiusX and radiusY = 0.

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

The events that are triggered with a finger always have a radius > 0. So all that was to do is add

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

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

into the event handlers to draw on my canvas.

看看这个 Jsfiddle

这篇关于在 Canvas 中使用三星 S-Pen的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！