Javascript 在HTML5画布上绘制，支持多点触控收缩、平移和缩放

我明白这不是一个严格意义上的代码问题-但我还没有达到这一点-让我解释一下

我有一个要求，让用户能够在一幅大图像上绘制（简单的手绘线条），并能够（在iPad上）进行缩放、平移和收缩

这让我有点疯狂。我看过这么多库、代码示例、产品等，但似乎没有任何东西能够满足这一要求，即使用（多点触摸）捏、缩放、平移绘制（一点触摸）。有很多paint.net、签名捕获等，但没有支持多点触控位的内容

我曾尝试调整各种库以实现我想要的（例如，将旧版本的与结合起来），但老实说，我一直在努力。我确实怀疑，在一天结束的时候，我将不得不写我自己的，并使用类似hammer.js（顺便说一下）的东西来做手势

无论如何，以防有人在那里遇到一个图书馆，可能适合我的需要，或可以为我指出正确的方向，将不胜感激

请随意给我一个很难避免自己编写代码的时间；-）

定制触摸。 该示例显示了使用标准浏览器触摸事件的自定义单触绘图和2点收缩缩放、旋转和平移

您需要通过CSS规则

touch action:none防止标准手势在文档正文上，否则它将不起作用

指针
使用初始化的指针对象

const pointer = setupPointingDevice(canvas);

处理触摸。使用
pointer.count
查看触摸次数，第一个触摸点可用作
pointer.x
，
pointer.y
。触摸点的数组可以作为
指针访问。点[touchNumber]

看法
是底部处理视图的对象。它只是一个2D矩阵，带有一些额外的函数来处理夹点<代码>视图。设置夹点（点，点）

以2个点作为参考开始夹点。然后查看。移动夹点（点，点）进行更新

该视图用于在显示画布上绘制

绘图

画布。要获取世界（图形坐标），需要将触摸屏坐标（画布像素）转换为转换后的图形。使用

view.toWorld（指针点[0]）以获取挤压图形的坐标

要设置主画布转换，请使用
view.apply（）

不完美
人类倾向于马虎，触摸缩放的界面需要延迟一点绘制，因为收缩动作的两次触摸可能不会同时发生。当检测到单触时，应用程序开始记录绘图点。如果在几帧之后没有第二次触摸，则会锁定到绘图模式。不会丢失任何触摸事件

如果第二次触摸发生在第一次触摸的几个帧内，则假定正在使用挤压动作。应用程序将转储任何以前的绘图点，并将模式设置为“收缩”

当应用程序处于draw或pinch模式时，它们将被锁定，直到未检测到任何触摸。这是为了防止因草率触摸而导致的不必要行为

演示
演示仅作为示例

注意：这不适用于非触摸设备。我抛出一个错误，就是找不到触碰

注意，我只做了最基本的代理检测。Android、iPhone、iPad以及任何报告多点触摸的设备

注：夹点事件通常会导致两个点拖到一个点上。此示例无法正确处理此类事件。当按压手势变成单触、旋转和缩放时，应切换到平移模式


const U=未定义；
const doFor=（count，callback）=>{var i=0；而（i0）{
const point=drawnPoints.shift（）；
dCtx.beginPath（）；
弧（点x，点y，8,0，数学π*2）；
dCtx.fill（）；
stroke（）；
}
}
//一开始就叫一次
函数init（）{
启动=错误；
view.setContext（ctx）；
}
//标准变量
var w=画布宽度；
var h=画布高度；
var cw=w/2；//居中
var-ch=h/2；
球形变种；
//主更新功能
功能更新（计时器）{
if（启动）{init（）}；
全局时间=计时器；
setTransform（1,0,0,1,0,0）；//重置转换
ctx.globalAlpha=1；//重置alpha
ctx.globalCompositeOperation=“源代码结束”；
如果（w！==内部宽度| | h！==内部高度）{
cw=（w=canvas.width=innerWidth）/2；
ch=（h=canvas.height=innerHeight）/2；
}
//清除主画布并绘制带有阴影的绘制图像，使其看起来漂亮
计算机断层扫描