在 FabricJS 中转换视口时边界对象错误，单击对象时用户无法选择对象

Posted 2023-03-25

【中文标题】在 FabricJS 中转换视口时边界对象错误，单击对象时用户无法选择对象

【英文标题】：Wrong bounding object when translate viewport in FabricJS, user can't select object when click on object

【发布时间】：2019-03-11 15:11:58

【问题描述】：

请帮我解决这个问题。 1. 我在位置有一个文字显示：左：10，上：10。 2. 使用 viewportTransform 将 viewPort 移动到新位置：X 轴 100 和 Y 轴 100 3. 文本对象正在移动到新位置 预期： 用户可以通过单击文本（在新位置）来选择文本对象（'hello world'）

实际： 第一次，用户不能点击文本对象。 & 对象边界仍然在旧位置（左：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>

【参考方案1】：

调用object.setCoords()，更改后会设置边界坐标。并检查When-to-call-setCoords

演示

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>

【讨论】：

感谢杜尔加，这是一个很好的答案。顺便说一句，如果我在画布中有很多对象，如何为它们更新所有坐标？有没有更短的解决方案？

@ThoBuiNgoc，您可以使用canvas.forEachObject 循环遍历所有对象。答案已更新。

杜尔加，非常感谢！

【参考方案2】：

不确定这是否仍然是一个问题，但您可以执行以下操作：

let vpt = [...canvas.viewportTransform];
vpt[4] = 100;
vpt[5] = 100;
canvas.setViewportTransform(vpt);

遇到了同样的问题并解决了。