时间戳

首页 > 解决方案 > Fabric.js：画布外的初始位置对象不再工作

fabricjs - Fabric.js：画布外的初始位置对象不再工作

问题描述

最近我开始使用较新版本的 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>

标签： fabricjs

解决方案

您需要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>

推荐阅读