グリッドイメージはキャンバス上のPinterestレイアウトのようです

Question

私はpixi.jsを使って対話型アプリケーションを作成しています。私はレイアウトのようなpinterestの形式で画面上の異なる容器に画像を配置するか、整理して見栄えをするようにそれらをグリッド化する必要があります。 Imはキャンバスに取り組んでいるので、gridify.jsのようなプラグインはキャンバスをサポートしません。Imはこれをキャンバス上で動作させるためのプラグインやコードを見つけることができません。また、画像はクリック可能でなければならないので、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の元のコードを使用して複数の列を使用できます