任何可用于设置相对于 canvas 中心点而不是 FabricJS 中的顶部和左侧的对象的选项

Question

I have an issue on mobile orientation change. When the orientation changes the canvas size adjust himself accordingly. And objects in the canvas exist in the same position after orientation where they were before the orientation relatively the canvas left and top.

It will be more clear in the image.

I want to change the positions of the objects on window:resize relatively to the center of canvas instead of left and top. Please help!

Answer 1

You can center the object on canvas with canvas.centerObject(object); .

 var canvas = new fabric.Canvas('c'); var dia1 = new fabric.Circle({ radius: 12, left: 0, top: 0, originX: 'center', originY: 'center', fill: 'transparent', strokeWidth: 5, stroke: "red", width: 50, height: 50, }); var dia2 = new fabric.Circle({ radius: 5, left: 0, top: 0, originX: 'center', originY: 'center', fill: 'red', width: 50, height: 50, }); var targetEl = new fabric.Group([dia1, dia2], { originX: 'center', originY: 'center', }); //center object on canvas canvas.centerObject(targetEl); canvas.add(targetEl); canvas.renderAll(); //center on window resize $(window).resize(function() { canvas.centerObject(targetEl); canvas.renderAll(); });

 canvas { border: 1px solid #ccc; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.4.0/fabric.js"></script> <canvas id="c" width="600" height="300"></canvas>

Answer 2

you may need to set the object dimensions as follwing

const canvas = new fabric.Canvas('canvas');
// you can simply use 
canvas.viewportCenterObject(obj);
// or if you want to center manually
const centerObject = obj => {
  const center = canvas.getCenter();
  const zoom = canvas.getZoom();
  canvas.centerObject(obj);
  obj.set({
    left:  center.left / zoom - obj.width / 2,
    top:  center.top / zoom - obj.height / 2,
  });
  obj.setCoords();
  canvas.calcOffset();
  canvas.renderAll()
};