Gridify Images like Pinterest Layout on Canvas

Question

Я использую pixi.js для создания интерактивного приложения. Мне нужно размещать изображения в разных контейнерах на экране в виде pinterest, например макета, или создавать их так, чтобы они выглядели упорядоченными и красивыми. Поскольку Im работает над canvas, поэтому плагины, такие как gridify.js, не поддерживают canvas и Im не могут найти какой-либо плагин или код, чтобы заставить это работать на холсте. Кроме того, изображения должны быть интерактивными, поэтому я не могу использовать плагины, такие как преобразование html в canvas, поскольку они генерируют только изображение.

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