说明

对象的定位

在fabric中，我们使用对象的top和left来定位对象在画布中的位置，且top和left默认是对象的 左上角

OriginX、OriginY

可以通过配置对象的originX和originY来修改默认原点的位置

originX和originY分别代表对象平移的水平起始点和垂直起始点，可以设置的值如下

originX : "left"|"right"|"center"
originY : "top"|"bottom"|"center"

左上角改为中心作为原点

绿色圆点是默认原点，红色原点是水平居中、垂直居中位置为原点

由于原来是左上角为原点，设置水平居中、垂直居中位置为原点，要减掉半个宽度、半个高度，否则坐标不对，导致元素显示有问题

提示：动画结束后要恢复左上角为原点，还要 加上半个宽度、半个高度

代码

function setOriginToCenter(element){
    // element.left = element.left + element.width/2
    // element.top = element.top + element.height/2
    // element.originX = 'center'
    // element.originY = 'center'
    element.set({
      left: element.left + element.width / 2,
      top: element.top + element.height / 2,
      originX: 'center', 
      originY: 'center' 
    })
}

中心改为左上角作为原点

要恢复原坐标，即：减去半个宽度、高度

function setOriginToCenterResetLeftTop(element){
    // element.left = element.left + element.width/2
    // element.top = element.top + element.height/2
    // element.originX = 'center'
    // element.originY = 'center'
    element.set({
      left: element.left - element.width / 2,
      top: element.top - element.height / 2,
      originX: 'left', 
      originY: 'top' 
    })
}

参考：
https://blog.csdn.net/qq_40340943/article/details/125144861