масштабирование ткани js canvas со всеми ее объектами

1

Я использую функцию для масштабирования всего тэга fabric.js, эта функция принимает значение в процентах как zoomCanvas (2.2); где 2.2 означает 220%, но вместо процента мне нужно масштабировать холст по пикселям, чтобы поместить холст в контейнер, например, когда холст загружается на страницу из json-данных, его начальный размер похож на 1200px x 700px, а размер моего контейнера - 500 пикселей. теперь мне нужно найти способ, с помощью которого можно преобразовать этот 500px в процентное значение, чтобы весь холст и весь его объект соответствовали 500px.

Это функция масштабирования, где коэффициент представляет собой процентное значение

   function zoomCanvas(factor) {
canvas.setHeight(canvas.getHeight() * factor);
canvas.setWidth(canvas.getWidth() * factor);
if (canvas.backgroundImage) {
    // Need to scale background images as well
    var bi = canvas.backgroundImage;
    bi.width = bi.width * factor; bi.height = bi.height * factor;
}
var objects = canvas.getObjects();



var tcounter = 0;

for (var i in objects) {

    tcounter++;


    //alert(tcounter);
    var scaleX = objects[i].scaleX;
    var scaleY = objects[i].scaleY;
    var left = objects[i].left;
    var top = objects[i].top;

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

    objects[i].scaleX = tempScaleX;
    objects[i].scaleY = tempScaleY;
    objects[i].left = tempLeft;
    objects[i].top = tempTop;

    objects[i].setCoords();
}
canvas.renderAll();
canvas.calcOffset();
}
Теги:
fabricjs

2 ответа

2

У вас должен быть оригинальный холст с некоторыми размерами. Из этого холста вы должны просто найти свои значения factorX и factorY. Например, ваш оригинальный холст составляет 1280x1020 px, и вам нужно преобразовать его в размер 500x500px.

var factorX = 500 / 1280;
var factorY = 500 / 1020;

Затем измените свою функцию из

function zoomCanvas(factor) {...}

в

function zoomCanvas(factorX, factorY) {...}

Используйте factorX для значений ширины и factorY для значений высоты.

  • 0
    Ничего себе, это прекрасно работает, большое спасибо :)
1

Необходимый масштабный коэффициент:

scaleRatio = Math.min(containerWidth/canvasWidth, containerHeight/canvasHeight);

Чтобы увеличить масштаб, вы должны просто использовать:

canvas.setDimensions({ width: canvas.getWidth() * scaleRatio, height: canvas.getHeight() * scaleRatio });

затем

canvas.setZoom(scaleRatio)

Специальная функция масштабирования не требуется.

  • 0
    Приведенный вами пример не масштабирует Text и IText .
  • 0
    это должно, зум это зум

Ещё вопросы

Сообщество Overcoder
Наверх
Меню