在 canvas 视图上处理滚动 - paperjs

Question

http://40.117.122.212/

我想在滚动 canvas 时动态添加更多图像，我不想在 canvas 上看到任何空白区域。

关于如何完成这项工作有什么想法吗？

我使用 paperjs，创建了大约 90 张图像，它们在 canvas 上随机移动。

Answer 1

每次滚动时，您可以检查屏幕底部是否有 space 以获取更多图像（也许顶部也有以获得更好的效果？），如果是，请添加更多图片。
为了让它工作，您肯定需要找到一种方法来快速获取 topest/lowest 项目以检查它们与视图边界的距离。

为了更好地理解这个概念，我将问题简化为一个只涉及一列圆圈的简单案例。
这是 sketch 演示解决方案。
代码应该是不言自明的，并且应该允许您将其转换为您的具体情况。

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

在 canvas 视图上处理滚动 - paperjs

handle scroll on canvas view - paperjs

javascript

canvas

paperjs