Fabric JS - перерисовывать объекты на холсте - PullRequest
Новая
       4

Fabric JS - перерисовывать объекты на холсте

0 голосов
/ 12 февраля 2019

У меня есть холст с фоновым изображением, поверх этого изображения я могу рисовать многоугольники и прямоугольники.Когда я изменяю размер окна, я могу изменить размер изображения, но я не нашел способа изменить размеры Объектов на холсте.

После масштаба объектов комментарий, этоне работает, как ожидалось.

PS: для масштабирования объекта я только что использовал здесь пример -> Scale fabric.js объекты холста .

Вот мой код:

function renderCanvas(canvas, base64Image) {
var img = new Image();
img.src = base64Image.src;    
img.onload = function() {
    var f_img = new fabric.Image(img);
    var canvas_parent_size = $('.canvas-wrapper').width();
    var canvas_width = Math.min(f_img.width,canvas_parent_size);
    var scale = canvas_width / f_img.width;
    var canvas_height = f_img.height * scale;
    canvas.setBackgroundImage(f_img, canvas.renderAll.bind(canvas), {

            top: 0,
            left: 0,
            scaleX: scale,
            scaleY: scale
        });
    canvas.setWidth(canvas_width);
    canvas.setHeight(canvas_height); 

    //json
    var polygonDataField = JSON.parse(document.querySelector('input.input-polygonData').value);  

    console.log(polygonDataField);

    //scale objects        
    var factor = canvas_width/polygonDataField.backgroundImage.width;
    var objects = canvas.getObjects();
    objects.forEach( obj => {

        var scaleX = obj.scaleX;
        var scaleY = obj.scaleY;
        var left = obj.left;
        var top = obj.top;

        var tempScaleX = scaleX * factor;
        var tempScaleY = scaleY * factor;
        var tempLeft = left * factor;
        var tempTop = top * factor;


        obj.scaleX = tempScaleX;
        obj.scaleY = tempScaleY;
        obj.left = tempLeft;
        obj.top = tempTop;

        obj.setCoords();
    });

    canvas.renderAll();
    canvas.calcOffset();

};
...