PaperJS触屏设备下双击移除平滑路径的实现问题咨询

核心问题原因 #

该问题本质是两个PaperJS默认行为的适配问题：

• 移动端没有onMouseMove对应的原生鼠标事件，触摸操作触发的是touchmove事件，PaperJS默认不会将触摸事件映射到onMouseMove回调上
• 动态生成的平滑路径没有默认绑定点击事件监听，需要在路径创建完成后手动绑定双击回调

具体实现步骤 #

1. 开启PaperJS触摸事件支持 #

首先在初始化PaperJS的代码中加入配置，开启触摸事件映射：
paper.settings.handleTouchEvents = true;
开启后触摸操作会自动映射到对应的onMouse*回调上，不需要单独适配touch事件。

2. 绘制平滑路径时绑定双击删除事件 #

在路径绘制完成的onMouseUp回调中，给新生成的路径绑定onDoubleClick事件：

let path;
function onMouseDown(event) {
  // 初始化平滑路径
  path = new paper.Path();
  path.strokeColor = 'black';
  path.strokeWidth = 2;
  path.smooth({ type: 'continuous' });
}

function onMouseDrag(event) {
  path.add(event.point);
}

function onMouseUp(event) {
  // 路径绘制完成后绑定双击删除回调
  path.onDoubleClick = function() {
    this.remove();
    paper.view.draw();
  };
}

3. 可选：添加单击选中效果 #

如果需要保留单击选中高亮的效果，可以同时绑定onClick事件：

path.onClick = function() {
  // 切换选中状态
  this.selected = !this.selected;
  // 自定义选中样式可直接修改strokeColor
  // this.strokeColor = this.selected ? 'yellow' : 'black';
  paper.view.draw();
};

注意事项 #

• 移动端双击识别有默认300ms延迟，若需要加快响应速度，可以给画布所在的HTML页面添加<meta name="viewport" content="width=device-width">元标签，禁用浏览器默认的双击缩放行为。
• 如果需要支持多点触控同时绘制多条路径，可以将路径实例存入数组管理，避免全局变量覆盖问题。

内容的提问来源于stack exchange，提问作者Riccardo Volpe