Question

最近，我开始使用Fabric.js的较新版本（从1.7.22到2.3.5）。我不得不对我认为合乎逻辑的现有代码进行一些修改。但是，我注意到您最初不能再将对象放置在画布外部，以后再将其重新放置在画布上。就像下面的代码一样。它不会显示。我的问题是：这是否由于某种原因而改变，或者这是一个问题（错误）？除了推迟将对象添加到画布或使用visible属性之外，我还有其他选择吗？

$( document ).ready(() => {
  const canvas = new fabric.Canvas('canvas');
  var rect = new fabric.Rect({
        left: 301,	  		
        top: 10,
        originX: 'left',
        originY: 'top',	
        width: 50,
        height: 50,
        fill: '#336699'
    });
    
  canvas.add(rect);						
  rect.set({"left": 10});
  rect.set({"top": 10});
  canvas.renderAll();
});

canvas {
  border: 1px solid tomato;
}

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.5/fabric.min.js"></script>
<canvas id="canvas" width="300" height="100"></canvas>

Answer 1

重新定位后，您需要使用setCoords()。

$( document ).ready(() => {
  const canvas = new fabric.Canvas('canvas');
  var rect = new fabric.Rect({
        left: 301,	  		
        top: 10,
        originX: 'left',
        originY: 'top',	
        width: 50,
        height: 50,
        fill: '#336699'
    });
    
  canvas.add(rect);						
  rect.set({"left": 10});
  rect.set({"top": 10});
  rect.setCoords();
  canvas.renderAll();
});

canvas {
  border: 1px solid tomato;
}

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.5/fabric.min.js"></script>
<canvas id="canvas" width="300" height="100"></canvas>

Fabric.js：画布外部的初始位置对象不再起作用

1 个答案: