Как запросить точно выбранные элементы в Paper.js? - PullRequest
Новая
       4

Как запросить точно выбранные элементы в Paper.js?

0 голосов
/ 28 октября 2018

Насколько я понимаю, project.getItems({selected: true}) возвращает неправильные результаты: я выбираю кривую, она возвращает родительский путь: Эскиз

Попробуйте нажать на кривую или сегмент.Весь путь будет перемещен.Затем попробуйте изменить поведение, установив var workaround = false на var workaround = true, чтобы наблюдать желаемое поведение.

Как я могу получить именно то, что действительно выбрано?

Текущее решение

В настоящее время я добавляю эти объекты в массив при выделении и использую эти элементы вместо project.getItems({selected: true}).

1 Ответ

0 голосов
/ 03 ноября 2018

Дело в том, что в архитектуре Paper.js, кривые и сегменты не являются элементами (они являются частью определенного item, который являетсяpath).Поэтому вы не должны ожидать, что project.getItems () вернет что-либо, кроме items.

Еще одна вещь, которую вы должны знать, это то, что путь считается выбранным, если какая-либо его частьвыбран (curves, segments, points, handles, position, bounds, ...).Предполагается, что кривая выбрана, если выбраны все ее части (points и handles).

Имея это в виду, вы можете создать алгоритм для извлечения "того, что действительно выбрано" на основе project.getItems({selected: true}) как его первая часть.Затем вам нужно пройтись по curves и segments, чтобы проверить, выбраны ли они.

Вот эскиз , демонстрирующий возможное решение. 

var vector = new Point(10, 10);

// Create path.
var path = new Path({
    segments: [
        [100, 100],
        [200, 100],
        [260, 170],
        [360, 170],
        [420, 250]
    ],
    strokeColor: 'red',
    strokeWidth: 10
});

// Translate given thing along global vector.
function translateThing(thing) {
    switch (thing.getClassName()) {
        case 'Path':
            thing.position += vector;
            break;
        case 'Curve':
            thing.segment1.point += vector;
            thing.segment2.point += vector;
            break;
        case 'Segment':
            thing.point += vector;
            break;
    }
}

// On mouse down...
function onMouseDown(event) {
    // ...only select what was clicked.
    path.selected = false;
    hit = paper.project.hitTest(event.point);
    if (hit && hit.location) {
        hit.location.curve.selected = true;
    }
    else if (hit && hit.segment) {
        hit.segment.selected = true;
    }

    // We check all items for demo purpose.
    // Move all selected things.
    // First get selected items in active layer...
    project.activeLayer.getItems({ selected: true })
    // ...then map them to what is really selected...
    .map(getSelectedThing)
    // ...then translate them.
    .forEach(translateThing);
}

// This method returns what is really selected in a given item.
// Here we assume that only one thing can be selected at the same time.
// Returned thing can be either a Curve, a Segment or an Item.
function getSelectedThing(item) {
    // Only check curves and segments if item is a path.
    if (item.getClassName() === 'Path') {
        // Check curves.
        for (var i = 0, l = item.curves.length; i < l; i++) {
            if (item.curves[i].selected) {
                return item.curves[i];
            }
        }
        // Check segments.
        for (var i = 0, l = item.segments.length; i < l; i++) {
            if (item.segments[i].selected) {
                return item.segments[i];
            }
        }
    }
    // return item by default.
    return item;
}

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

...