[英]Any options available to set objects relative to canvas center point instead of top and left in FabricJS
您可以使用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>
您可能需要设置 object 尺寸如下
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()
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.