ручка прокрутки на холсте - paperjs - PullRequest
Новая
       39

ручка прокрутки на холсте - paperjs

0 голосов
/ 07 декабря 2018

http://40.117.122.212/

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

Есть идеи, как это сделать?

Я использую paperjs, создаю около 90 изображений, и они перемещаются по холсту случайным образом.

1 Ответ

0 голосов
/ 07 декабря 2018

Каждый раз, когда вы прокручиваете, вы можете проверить, есть ли место для большего количества изображений в нижней части экрана (и, возможно, сверху также для лучшего эффекта?), И если это правда, добавьте больше изображений.
Чтобы это работало, вам, безусловно, нужно будет найти способ быстро получить самые верхние / нижние элементы, чтобы проверить, насколько они далеки от границ обзора.

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

// Set gris Size.
const gridSize = 100;

// Calculate and store several useful metrics.
const viewHeight = view.bounds.height;
const itemsCount = Math.floor(viewHeight / gridSize);

// For the simplicity of the demo, items are only drawn in one column so x
// coordinate is constant.
const x = view.center.x;

// Create original items to fill the screen.
let items = [];
for (let i = 0; i < itemsCount; i++) {
    items.push(createItem(i * gridSize));
}

// Center them on the screen.
project.activeLayer.position = view.center;

// On scroll...
view.element.onmousewheel = function(event) {
    // ...translate layer up or down.
    // Using layer translation instead of view scroll cause items coordinates
    // to be updated which will help us in later calculations.
    const translation = event.deltaY > 0 ? new Point(0, 10) : new Point(0, -10);
    project.activeLayer.translate(translation);

    // Trigger items addition process.
    addItemsIfNeeded();
};

// Simply create a random colored, horizontally centered circle, at given
// y position.
function createItem(y) {
    return new Path.Circle({
        center: new Point(x, y),
        radius: gridSize / 4,
        fillColor: Color.random()
    });
}

// Check for empty space at the bottom or the top of the page and create as
// many items as needed to fill the empty space.
function addItemsIfNeeded() {
    // Get extremas items y positions.
    const lastItemY = items[items.length - 1].position.y;
    const firstItemY = items[0].position.y;
    const deltaBottom = viewHeight - lastItemY;
    // If there is empty space at bottom...
    if (deltaBottom > gridSize) {
        // ...add items at bottom.
        const itemsNeededCount = Math.floor(deltaBottom / gridSize);
        addItems(itemsNeededCount, lastItemY);
    // If there is empty space at top...
    } else if (firstItemY > gridSize) {
        // ...add items at top.
        const itemsNeededCount = Math.floor(firstItemY / gridSize);
        addItems(itemsNeededCount, firstItemY, true);
    }
}

// Create given number of items and add them to the begining or the end of the
// stack.
function addItems(count, referenceItemY, before) {
    // For each new item...
    for (let i = 1; i <= count; i++) {
        // ...calculate y position...
        const y = before
            ? referenceItemY - i * gridSize
            : referenceItemY + i * gridSize;
        // ...create item...
        const item = createItem(y);
        // ...add it to the stack.
        if (before) {
            items.unshift(item);
        } else {
            items.push(item);
        }
    }
}
...