Неправильный ограничивающий объект при переводе области просмотра в FabricJS, пользователь не может выбрать объект при нажатии на объект

Question

Пожалуйста, помогите мне решить эту проблему.1. У меня есть текстовый дисплей в позиции: слева: 10, сверху: 10.2. Использование viewportTransform для перемещения viewPort в новую позицию: перевод по оси X 100 и по оси Y 1003. Текстовый объект перемещается на новую позицию Ожидаемое: Пользователь может выбрать текстовый объект («Привет мир»), нажав на текст (в новой позиции)

Фактически: Сначала пользователь не может нажать на текстовый объект.& объект находится еще в старой позиции (слева: 10, сверху: 10).(см. прикрепленное изображение)Пожалуйста, проверьте мой демо-код.Я использую Fabricjs версии 2.4.0 это демо

Как пройти через эту проблему?Спасибо !

var canvasObject = document.getElementById("editorCanvas");
  // set canvas equal size with div
  $(canvasObject).width($("#canvasContainer").width());
  $(canvasObject).height($("#canvasContainer").height());
 
 canvas = new fabric.Canvas('editorCanvas', {
    backgroundColor: 'white',
    selectionLineWidth: 2,
    width: $("#canvasContainer").width(),
    height: $("#canvasContainer").height()
  });

  canvas.controlsAboveOverlay = true;

  // Add a text to canvas
  var text = new fabric.Text('hello world', { left: 10, top: 10 });
  canvas.add(text);
  
  // Transform View
  canvas.viewportTransform[4] = 100;
  canvas.viewportTransform[5] = 100;
  canvas.requestRenderAll();

#canvasContainer {
            width: 100%;
            height: 100vh;
            background-color: gray;
        }

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.0/fabric.js"></script>


<div id="canvasContainer">
  <canvas id="editorCanvas"></canvas>
</div>

Answer 1

Вызовите object.setCoords () , он установит ограничивающий кординат после изменения.И отметьте Когда звонить, установить наборы

DEMO

var canvasObject = document.getElementById("editorCanvas");
// set canvas equal size with div
$(canvasObject).width($("#canvasContainer").width());
$(canvasObject).height($("#canvasContainer").height());

canvas = new fabric.Canvas('editorCanvas', {
  backgroundColor: 'white',
  selectionLineWidth: 2,
  width: $("#canvasContainer").width(),
  height: $("#canvasContainer").height()
});

canvas.controlsAboveOverlay = true;

// Add a text to canvas
var text = new fabric.Text('hello world', {
  left: 10,
  top: 10
});
canvas.add(text);

// Transform View
canvas.viewportTransform[4] = 100;
canvas.viewportTransform[5] = 100;
setObjectCoords();
canvas.requestRenderAll();

function setObjectCoords(){
  canvas.forEachObject(function(object){
    object.setCoords();
  })
}

#canvasContainer {
  width: 100%;
  height: 100vh;
  background-color: gray;
}

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.0/fabric.js"></script>


<div id="canvasContainer">
  <canvas id="editorCanvas"></canvas>
</div>