fabric 原点OriginX、OriginY-马育民老师

# 说明

### 对象的定位

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

# OriginX、OriginY

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

originX和originY分别代表对象平移的水平起始点和垂直起始点，可以设置的值如下
```
originX : "left"|"right"|"center"
originY : "top"|"bottom"|"center"
```

# 左上角改为中心作为原点

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

[![](/upload/0/0/1IX8XELFbkKM.jpg)](/upload/0/0/1IX8XELFbkKM.jpg)

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

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

### 代码

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

原文出处：http://malaoshi.top/show_1IX8XEQSnFpc.html