标签: paperjs

所以paper.js是一个很棒的图书馆.我目前正在尝试利用它来构建一个多点触控白板/绘图webapp,最终将通过服务器进行协作.

如何使用纸张实现多点触控？

我的路障就在这里.我一直无法找到一种方法来允许paper.js为每次触摸创建多个路径.

到目前为止,我已经通过谷歌进行了相当多的研究,虽然我的研究可能有问题,但我试图在paper.js上使用浏览器touchevents,并且我试图通过创建一个新的画布来分隔它们来处理每个事件.

如果这里有人已经成功实现了paper.js的多点触控,或者对于这个应用程序有更好的推荐而不是纸张,我会非常高兴听到.

如何在onMouseDrag事件中实现围绕枢轴旋转组。所以你可以想象我的意思是小提琴，

var point1 = new Point(150, 150);
  var point2 = new Point(250, 150);
  path.add(point1);
  path.add(point2);

  var handle1 = new Path.Circle({
    center    : point1,
    radius    : 7,
    fillColor : 'green'
  });

  var handle2 = new Path.Circle({
    center    : point2,
    radius    : 7,
    fillColor : 'blue'
  });

  var group = new Group(path, handle1, handle2);
  group.pivot = point1;

  handle1.onMouseDrag = function(event) {
    group.position = group.position.subtract(handle1.position).add(event.point);
  };

  handle2.onMouseDrag = function(event) {
    group.rotate(event.point.angle - handle2.position.angle)
  };

有一条在边缘有两个手柄的路径。绿色handle1可以正常工作，它应该移动整个路径。蓝色的handle2在拖动时应根据鼠标位置围绕绿色点旋转路径。我在那里的代码可以正常工作，但仅适用于180度低角度的cca。

我在这里想念什么？

非常感谢您的帮助

示例：https : //jsfiddle.net/gnxdkqgh/5/

1. 尝试单击x0.5- 一切正常
2. 尝试单击x2- 超出原始矩形的画布部分未正确重绘
3. 尝试x2快速连续单击- 您可以看到它绘制了动画虚线，但无法“清除”画布。它只是绘制现有的破折号，从而形成实线。

这是Paper.js 中的错误还是我做错了什么？

我正在使用最新的 Chrome。如果您无法重现问题，请使用以下屏幕截图：

一个矩形和几个圆在画布上。散落。矩形顶部的圆必须具有不同的颜色。

圆必须完全在矩形内。

如何在Paper JS中检测到这一点。