Question

我使用pixi.js创建一个交互式应用程序。我需要将图像放在屏幕上的不同容器中，像pinterest一样布局或者将它们网格化，以便它们看起来整齐有序。因为我在画布上工作所以像gridify.js这样的插件不支持画布，我无法找到任何插件或代码来使这个在画布上工作。此外，图像需要是可点击的，所以我不能使用像html这样的插件进行画布转换，因为它们只生成图像。

Answer 1

我通过检查gridify.js逻辑找到了解决方案。这是我的代码：

    var items = options.items;

    var width = options.containerWidth,
    item_margin = parseInt(options.margin || 0),
    item_width = parseInt(options.max_width || options.width || 220),
    column_count = Math.max(Math.floor(width / (item_width + item_margin)), 1),
    left = column_count == 1 ? item_margin / 2 : (width % (item_width + item_margin)) / 2,
    lastHeight = 0;
    if (options.max_width) {
        column_count = Math.ceil(width / (item_width + item_margin));
        item_width = (width - column_count * item_margin - item_margin) / column_count;
        left = item_margin / 2;
    }

    for (var i = 0, length = items.length; i < length; i++) {

       var ratio = item_width / items[i].width;
        items[i].width = item_width;
        items[i].height = items[i].height * ratio;
        items[i].position.y = lastHeight + item_margin / 2;
        items[i].position.x = 0;


        lastHeight += items[i].height + (item_margin * 2);
    }

迭代所有容器并将参数传递给上面的函数。它会将图像/内容网格化为容器。我已经为每个容器使用了单个列，但是您可以使用gridify.js中的原始代码来使用多个列

网格化图像像Pinterest布局在画布上

1 个答案: