Возможно ли фиксированное масштабирование в FabricJS? - PullRequest
Новая
       29

Возможно ли фиксированное масштабирование в FabricJS?

0 голосов
/ 15 ноября 2018

У меня есть прямоугольник в fabricjs. Есть сетки на заднем плане. Каждая сетка в xAxis - это gridSizecolumn, а yAxis - gridSizeRow

enter image description here

Как я могу масштабировать прямоугольник с фиксированными значениями, чтобы он увеличивался в соответствии с сетками фона

возникли проблемы: неправильное масштабирование с использованием приведенного ниже кода.

areaCanvas.on ('object: scaling', onObjectScaled); 

function onObjectScaled(e){
    fabric.Object.prototype.objectCaching = false;
    var obj = e.target;

    avoidCrossingBoundaries(obj)
    console.log(obj)


    obj.set({
        left: Math.round(obj.left / gridSizeColumn) * gridSizeColumn,
        top: Math.round(obj.top / gridSizeRow) * gridSizeRow,
        // height: Math.round(obj.getHeight() / gridSizeRow) * gridSizeRow,
        // width: Math.round(obj.getWidth() / gridSizeColumn) * gridSizeColumn
    });
    obj.setHeight(Math.round(obj.getHeight() / gridSizeRow) * gridSizeRow)
    obj.setWidth(Math.round(obj.getWidth() / gridSizeColumn) * gridSizeColumn)

}

1 Ответ

0 голосов
/ 15 ноября 2018

Если вы хотите изменить rects 'width и height, вам также необходимо сбросить их scaleX / scaleY для каждого события scale: 

const canvas = new fabric.Canvas("c")

const img = new fabric.Rect({
  left: 20,
  top: 20,
  width: 100,
  height: 100,
  fill: 'red'
})
canvas.add(img)

function onObjectScaled(e){
    const gridSizeColumn = 20
    const gridSizeRow = 20
    fabric.Object.prototype.objectCaching = false;
    var obj = e.target;

    // avoidCrossingBoundaries(obj)
    // console.log(obj)


    obj.set({
        left: Math.round(obj.left / gridSizeColumn) * gridSizeColumn,
        top: Math.round(obj.top / gridSizeRow) * gridSizeRow,
        // height: Math.round(obj.getHeight() / gridSizeRow) * gridSizeRow,
        // width: Math.round(obj.getWidth() / gridSizeColumn) * gridSizeColumn
    });

    obj.set({
      // set new width and height
      width: Math.round(obj.getHeight() / gridSizeRow) * gridSizeRow,
      height: Math.round(obj.getWidth() / gridSizeColumn) * gridSizeColumn, 
      // reset scaleX and scaleY
      scaleX: 1,
      scaleY: 1
    })
}

canvas.on('object:scaling', onObjectScaled);
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.js"></script>
<canvas id='c' width="500" height="400"></canvas>

Примечание: вы не указали версию fabric.js, поэтому я предположил, что вы используете v1.x.x (v2 больше не имеет .getHeight() / .getWidth())

...