Question

我正在使用fabricjs 2.4.1编写思维导图应用程序。这意味着我在画布上创建了很多对象。为了允许通过拖动画布一次拖动所有这些，我将它们分组。最初，我创建的组的大小是画布的两倍，但是当加载大地图时，我需要调整画布的大小，以便所有对象都适合。当我这样做时，画布完全模糊了。我发现在组上将objectCaching设置为false可以解决问题，但随后拖动组变得很慢。

我在这个小提琴中转载了这个问题：https://jsfiddle.net/Franck_Dervaux/1k0wmLoj/

第一次运行时，它将在画布上显示一个随机矩形。当您单击“单击以调整组大小”按钮时，将调整组的大小。此后，矩形显示变得模糊，随着组大小调整因子变大，矩形变得更加模糊。我尝试使用addWithUpdate使组自动调整大小，但这无济于事。我也尝试四舍五入矩形的位置和大小，但没有成功。我还认为调整组的大小可能会更改对象的比例，但不会。

任何人都可以帮助我找出如何避免这种模糊效果的同时仍然通过对象缓存保持良好的性能吗？

提前谢谢

HTML

<div id="container">
  <canvas id="c"></canvas>
</div>
<button id="button">
Click to resize group
</button>

JavaScript

let fc, group, r

let FACTOR = 10

$('#button').click(function() {
  group.set({
    top: -FACTOR * fc.getHeight(),
    left: -FACTOR * fc.getWidth(),
    width: 2 * FACTOR * fc.getWidth(),
    height: 2 * FACTOR * fc.getHeight(),
  })
  fc.requestRenderAll()
})

$(function() {
  fc = new fabric.Canvas('c')
    fc.setBackgroundColor('white')

  group = new fabric.Group([], {
    hasControls: false,
    hasBorders: true,
    top: -fc.getHeight(),
    left: -fc.getWidth(),
    width: 2 * fc.getWidth(),
    height: 2 * fc.getHeight(),
    hoverCursor: 'default',
  })

  r = new fabric.Rect({
    top: 20 + 50 * Math.random(),
    left: 20 + 50 * Math.random(),
    width: 100 * Math.random(),
    height: 100 * Math.random(),
    stroke: 'blue',
    strokeWidth: 1,
    fill: 'transparent'
  })
  group.add(r)

  fc.add(group)
})

调整组大小后，fabricjs对象变得模糊

0 个答案: