Как удалить плавный путь при двойном щелчке по нему (для устройств с сенсорным экраном) в PaperJS

Question

Проверяя на устройстве с сенсорным экраном (мой мобильный телефон), я заметил невозможность выбора элемента PaperJS с помощью onMouseMoveсобытие и поэтому установите элемент как значение для переменной. Другая проблема для мобильного устройства - это сложность нажатия кнопки d клавишу на клавиатуре, чтобы удалить selectedPath...

Поэтому я решил использовать onDoubleClickСобытие на добавленный элемент , чтобы удалить его, как в этом эскизе , где вы можете нарисовать стрелку, перетаскивая и сделать его желтый с одним щелчком мыши или удалить его с помощью двойного щелчка на нем (вы также можете удалить прямоугольник с двойным щелчком по это), но не может добиться того же в этом другом эскизе (аналогично предыдущее решениепредыдущему вопросу), чтобы удалить гладкий элемент (нарисованный перетаскиванием на холсте) двойным щелчком.

Спасибо за помощь

Answer 1

Что происходит, когда вы хотите удалить существующий элемент, дважды щелкнув его, вы также нежелательно запускаете прослушиватель mousedown, который используется для рисования новых элементов и не должен запускаться в этом случае.
Что вам нужно сделать, так это проверить, находитесь ли вы над существующим элементом или нет, прежде чем начинать рисовать.

Вот эскиз, демонстрирующий простое решение вашей проблемы.

      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

По моей просьбе пришло улучшение. Вот суть моего решения:

Код JS:

          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);

но я замечаю, что, хотя на ПК все вроде работает, при просмотре скетча со смартфона нет действия ни для одиночного, ни для двойного щелчка. Одиночный щелчок должен вывести выбранный элемент на передний план, а двойной щелчок должен удалить его с холста. Я не знаю, является ли это ошибкой скетчера PaperJS, который не воспринимает прикосновение как щелчок на устройствах с сенсорными экранами (который должен быть отправлен на GitHub и, возможно, реализован в моем коде с некоторой внешней библиотекой, которая дает PaperJS поддержку коснитесь как щелчок) или если в моем коде есть ошибка.

Любые предложения приветствуются, спасибо.