Как я могу масштабировать несколько изображений для размещения на холсте? - PullRequest
Новая
       13

Как я могу масштабировать несколько изображений для размещения на холсте?

0 голосов
/ 19 мая 2019

Как я могу масштабировать несколько изображений для размещения на холсте?

Я пробовал разные формулы масштабирования в StackOverflow, но они фокусируются на масштабировании одного изображения.У меня есть X изображений, которые нужно масштабировать и вписать в холст.

Вот jsfiddle того, что я получил.

http://jsfiddle.net/7eh4adjn/1

var canvas = new fabric.Canvas('c');
var canvasWidth = canvas.getWidth();
var canvasHeight = canvas.getHeight();

    var url = 'https://www.gravatar.com/avatar/f1fcf834ddad415f60d29c87cc10d4d4?s=80'
    var col = 0;
    var row = 0;
    for (var i = 0; i < 10; i++) {

        fabric.Image.fromURL(url, (img) => {

            const imageWidth = img.width;
            const imageHeight = img.height;
            const areaImage = imageHeight * imageWidth;
            const areaCanvas = canvasHeight * canvasWidth;
            const imageAspectRatio = imageWidth / imageHeight;
            const canvasAspectRatio = canvasWidth / canvasHeight;
            const maxAreaPerImage = areaCanvas / areaImage;



            let left = col * imageWidth;
            const futureTile = left;
            col++;
            if (futureTile > canvasWidth) {
                col = 0;
                left = 0;
                row++;
                col++;
            }


            const top = imageHeight * row;


            img.set({
                width: imageWidth,
                height: imageHeight,
                left,
                top,
                strokeWidth: 0,
                fill: '#00ff00'
            }).scale(1)

            /// group.addWithUpdate(img, {top: 0, left: 0});

            canvas.add(img);
            /// console.log('ADDED ', i);
        })
      }
      canvas.renderAll();
...