如何在 PaperJS 中双击它（对于触摸屏设备）删除平滑路径

Question

从触摸屏设备（我的手机 phone）检查，我注意到无法使用 onMouseMove 事件 select PaperJS 项目等等将项目设置为 selectedPath 变量的值。对于移动设备，另一个问题是难以按键盘上的 d 键删除 selectedPath...

所以我想在添加的项目上使用 onDoubleClick 事件来删除它，就像在 this sketch where you can draw an arrow by dragging and make it yellow with a single click or remove it with a double click on it (you can also remove the rectangle with a double click on it), but can't achieve the same in this other sketch (similar to the 中一样），以删除一个平滑的项目（在 canvas 上绘制拖动）双击。

感谢您的帮助

Answer 1

发生的事情是，当您想要通过双击删除现有项目时，您还意外地触发了 mousedown 侦听器，该侦听器用于绘制新项目，在这种情况下不应触发。
您需要做的是在开始绘图之前检查您是否在现有项目上。

这里有一个 sketch 演示了解决您的问题的简单方法。

document.addEventListener('touchmove', function(event) {
    event.preventDefault();
}, false);

var path;
let selectedPath;

// The mouse has to drag at least 20pt
// before the next drag event is fired:
tool.minDistance = 20;

function onMouseDown(event) {
    // If the mouse is pressed over an existing item, cancel drawing.
    if (event.item) {
        return;
    }
    path = new Path();
    path.strokeWidth = 4;
    path.strokeColor = 'black';
    path.fillColor = 'red';
    path.selected = true;
    path.closed = true;
    path.onClick = function() {
        this.strokeColor = 'yellow';
    };
    path.onDoubleClick = function() {
        this.remove();
    };
}

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

function onMouseUp(event) {
    if (path) {
        path.selected = false;
        path.smooth();
        path = null;
    }
}

function onMouseMove(event) {
    project.activeLayer.selected = false;
    if (event.item) {
        event.item.selected = true;
        selectedPath = event.item;
    } else {
        selectedPath = null;
    }
}

function onKeyDown(event) {
    if (selectedPath && event.key == 'd') {
        selectedPath.remove();
    }
}

如果您希望能够绘制新形状，即使您的指针位于现有形状上，您也必须引入更复杂的策略来理解用户意图。让我知道，如果您需要这个但没能做到，也许可以开一个新线程。

Answer 2

我的要求得到了改善。 Here 我的解决方案的草图：

JS code:

    var script = document.createElement('script');
    script.src = 'https://code.jquery.com/jquery-3.6.0.min.js';
    script.type = 'text/javascript';
    document.getElementsByTagName('head')[0].appendChild(script);
    
    tool.minDistance = 2;
    
    var path;
    var selections = [];
    
    function onMouseDown(event) {
        var lightness = (Math.random() - 0.5) * 0.4 + 0.4;
        var hue = Math.random() * 360;
        path = new Path({
            strokeWidth: 2,
            strokeColor: 'black',
            strokeCap: 'round',
            strokeJoin: 'round',
            fillColor: { hue: hue, saturation: 1, lightness: lightness },
            fullySelected: true,
            closed: true
        });
        path.fillColor.alpha = 0.5;
    
        if (path) {
            path.selected = false;
        }
    
        return path;
    }
    
    function onMouseMove(event) {
        project.activeLayer.strokeColor = 'black';
        if (event.item) {
            event.item.strokeColor = 'yellow';
        }
    }
    
    const myMap = [];
    function onMouseDrag(event) {
        path.add(event.point);
        
        myMap.push("x:" + event.point.x + ", y: " + event.point.y);
        console.log("Coordinates of control point P" + myMap.length + ": X = " + Number((path.lastSegment.point.x).toFixed(0)) + ", Y = " + Number((path.lastSegment.point.y).toFixed(0)));
    }
    
    function onMouseUp(event) {
        myMap.length = 0;
    }
            
    (function( $ ){
        $.fn.myfunction = function() {
            $( "#canvas" ).mouseup(function() {
                if (path == undefined) {
                    return true;
                }
                
                var selection = path;
                
                selection.smooth({
                    type: 'catmull-rom',
                    factor: 0.5
                });
                
                selection.onClick = function() {
                    this.bringToFront();
                }
                   
                selection.onDoubleClick = function(event) {
                    this.remove();
                }
    
                selections.push(selection);
            });
    
            return this;
        }; 
    })( jQuery );
    
    $('#canvas').myfunction(path);

但我注意到，尽管从 PC 上一切似乎都正常，但从智能手机访问草图时，单击或双击都没有任何动作。单击应将单击的元素置于最前面，而双击应将其从 canvas 中移除。我不知道这是否是 PaperJS sketcher 的错误，它不会将触摸视为点击带有触摸屏的设备（将在 GitHub 上提交并且可能在我的代码中使用一些外部库实现PaperJS 支持触摸作为点击）或者如果我的代码有任何错误。

欢迎任何建议，谢谢。

如何在 PaperJS 中双击它（对于触摸屏设备）删除平滑路径

How to Remove Smooth Path on Double Click on it (for touch screen devices) in PaperJS

path

smoothing

paperjs

removeeventlistener

ondoubleclick