javascript - 在FabricJS中调整窗口大小时如何始终居中剪切区域？

请帮助我解决此问题。
我有一个画布区域，总是用灰色填充屏幕尺寸。
而尺寸为300 x 300的矩形剪辑路径->在调整窗口大小时如何使此剪辑路径始终显示在画布的中心？ （并且剪辑路径视图内的所有元素仍保持相对位置）

实际：


预期：


这是我的问题：
https://jsfiddle.net/thobn24h/uqwoy7d3/13/

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 canvas clip path
  var clipPath = new fabric.Rect({
      left: 50,
      top: 50,
      width: 300,
      height: 300 });

  canvas.clipPath = clipPath;

  // create a rectangle object
  var rect = new fabric.Rect({
    left: 100,
    top: 100,
    fill: 'red',
    width: 150,
    height: 150
  });

  rect.set({
    transparentCorners: false,
    rotatingPointOffset: 40,
    cornerColor: 'black',
    cornerStrokeColor: 'black',
    borderColor: 'black',
    cornerSize: 12,
    padding: 10,
    cornerStyle: 'circle',
    borderDashArray: [3, 3]
  });

  // "add" rectangle onto canvas
  canvas.add(rect);

  var text = new fabric.Text('hello world', { left: 100, top: 100 });
  canvas.add(text);

  // Tracking resize windows event
  window.addEventListener('resize', resizeCanvas, false);

#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>

<script>

  function resizeCanvas() {

    canvas.setDimensions({
    	width: $("#canvasContainer").width(),
    	height: $("#canvasContainer").height()
  	});

	}
 </script>

先感谢您！

最佳答案

在您的function resizeCanvas中，您需要相对于宽度移动所有项目。

这是代码：
我确实删除了一些不需要重现此问题的代码。

var canvasObject = document.getElementById("editorCanvas");
$(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;

function resizeCanvas() {
  var w = $("#canvasContainer").width();
  var h = $("#canvasContainer").height();
  canvas.setDimensions({ width: w, height: h });

  clipPath.left = w/2 - clipPath.width/2;
  rect.left = clipPath.left + 50;
  text.left = clipPath.left + 50;
}


// Add canvas clip path
var clipPath = new fabric.Rect({left: 50, top: 50, width: 300, height: 300});
canvas.clipPath = clipPath;

// create a rectangle object
var rect = new fabric.Rect({
  left: 100, top: 100, fill: 'red', width: 150, height: 150
});
canvas.add(rect);

var text = new fabric.Text('hello world', {left: 100, top: 100});
canvas.add(text);

// Tracking resize windows event
window.addEventListener('resize', resizeCanvas, false);
resizeCanvas()

#canvasContainer {
  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>

关于javascript - 在FabricJS中调整窗口大小时如何始终居中剪切区域？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52593369/