originX, originY, left, top #
以左上角为基准点，left 和 top 指明了原点的位置； originX 和 originY 指明了矩形的水平和垂直方向哪个点与原点重合； originX 取值有 left, right 和 center； originY 取值有 top, bottom 和 center； 如 left = 100, top = 100, originX = left, originY = top 时，代表原点为 (100, 100)，矩形左上角的点与原点重合。 http://fabricjs.com/test/misc/origin.html https://www.cnblogs.com/xc-dh/p/17218233.html
object:scaling 事件发生时，transfrom.target.originX 和 transform.target.originY 是用户拖拽点对侧的点。如用户拖拽左上角，则 originX = right，originY = bottom。
lockScalingFlip, centeredRotation #
lockScalingFlip: true // 禁止水平翻转
centeredRotation: true // 启用中心旋转
不支持单独设置某个方向的 <code>padding</code> #
Fabric.js 不支持单独设置某一个方向的 padding。作者回复说：padding 只用于调整控制块和元素之间的距离，单独设置某个方向的 padding 并非通用需求。
no is not a feature at all.
the padding is just to make controls larger by a bit it does not do more than this. you can still override the method that render the controls to achieve what you want.
旋转 #
调用 setCoords 快速获取设置 angle 后对象的坐标。
https://fabric5.fabricjs.com/fabric-gotchas
<a href="https://fabric5.fabricjs.com/docs/fabric.Image.html#.fromURL">Image.fromURL</a> #
/**
* Creates an instance of fabric.Image from an URL string
* @static
* @param {String} url URL to create an image from
* @param {Function} [callback] Callback to invoke when image is created (newly created image is passed as a first argument). Second argument is a boolean indicating if an error occurred or not.
* @param {Object} [imgOptions] Options object
*/
fabric.Image.fromURL = function(url, callback, imgOptions) {
fabric.util.loadImage(url, function(img, isError) {
callback && callback(new fabric.Image(img, imgOptions), isError);
}, null, imgOptions && imgOptions.crossOrigin);
};
flipX, flipY #
镜像时使用，沿水平或垂直方向翻转。
Events #
object:scaling
{
"e": {
"isTrusted": true
},
"transform": {
"target": {
"type": "circle",
"version": "5.2.1",
"originX": "left",
"originY": "top",
"left": 242,
"top": 108.49,
"width": 40,
"height": 40,
"fill": "blue",
"stroke": null,
"strokeWidth": 1,
"strokeDashArray": null,
"strokeLineCap": "butt",
"strokeDashOffset": 0,
"strokeLineJoin": "miter",
"strokeUniform": false,
"strokeMiterLimit": 4,
"scaleX": 2.18,
"scaleY": 2.18,
"angle": 0,
"flipX": false,
"flipY": false,
"opacity": 1,
"shadow": null,
"visible": true,
"backgroundColor": "",
"fillRule": "nonzero",
"paintFirst": "fill",
"globalCompositeOperation": "source-over",
"skewX": 0,
"skewY": 0,
"radius": 20,
"startAngle": 0,
"endAngle": 360
},
"action": "scale",
"corner": "tr",
"scaleX": 1.7075711343346573,
"scaleY": 1.7075711343346573,
"skewX": 0,
"skewY": 0,
"offsetX": 68.3333330154419,
"offsetY": -1.6770834922790527,
"originX": "left",
"originY": "bottom",
"ex": 310.3333330154419,
"ey": 126.3125,
"lastX": 310.3333330154419,
"lastY": 126.3125,
"theta": 0,
"width": 68.30284537338629,
"shiftKey": false,
"altKey": false,
"original": {
"scaleX": 1.7075711343346573,
"scaleY": 1.7075711343346573,
"skewX": 0,
"skewY": 0,
"angle": 0,
"left": 242,
"flipX": false,
"flipY": false,
"top": 127.98958349227905,
"originX": "left",
"originY": "bottom"
},
"reset": false,
"signX": 1,
"signY": -1,
"actionPerformed": true
},
"pointer": {
"x": 340.3333330154419,
"y": 117.3125
},
"target": {
"type": "circle",
"version": "5.2.1",
"originX": "left",
"originY": "top",
"left": 242,
"top": 108.49,
"width": 40,
"height": 40,
"fill": "blue",
"stroke": null,
"strokeWidth": 1,
"strokeDashArray": null,
"strokeLineCap": "butt",
"strokeDashOffset": 0,
"strokeLineJoin": "miter",
"strokeUniform": false,
"strokeMiterLimit": 4,
"scaleX": 2.18,
"scaleY": 2.18,
"angle": 0,
"flipX": false,
"flipY": false,
"opacity": 1,
"shadow": null,
"visible": true,
"backgroundColor": "",
"fillRule": "nonzero",
"paintFirst": "fill",
"globalCompositeOperation": "source-over",
"skewX": 0,
"skewY": 0,
"radius": 20,
"startAngle": 0,
"endAngle": 360
}
}