fabric.js 实现图片编辑时，遇到的坑

问：图形在画布上画好之后，拖拽将图形放大时，边框会根据拖拽等比例放大，那如何保证边框始终保持不变呢?

答：可以在 new fabric.xxx 的时候添加这两个配置： noScaleCache：true strokeUniform: true

问：鼠标点击添加文字时，如何添加文字边框？

答：当鼠标点击画布的时候，创建文本对象，但是，在马上编辑的时候，无法显示边框，只有在下次选中该文本对象的时候才能显示边框，这时，只有在创建文本对象的同时，将该文本对象设置为活动对象即可，如下，添加： this.canvas.setActiveObject(this.textbox);

this.textbox = new fabric.Textbox("", {
                        left: this.getTransformedPosX(this.mouseFrom.x),
                        top: this.getTransformedPosY(this.mouseFrom.y),
                        fontSize: this.config[this.editType].lineWidth * 10,
                        fill: this.config[this.editType].fillStyle,
                        stroke: this.config[this.editType].fillStyle,
                        hasControls: false,
                        editable: true,
                        // backgroundColor: '#fff',
                        borderColor: "red",
                        // isEditing: true,
                        editingBorderColor: "red",
                        selectable: true,
                        hasBorders: true,
                        padding: 2,
                        showTextBoxBorder: true
                    this.canvas.add(this.textbox);
                    // 文本打开编辑模式
                    this.textbox.enterEditing();
                    // 文本编辑框获取焦点
                    this.textbox.hiddenTextarea.focus();
                    // 设置当前选中，从而显示边框
                    this.canvas.setActiveObject(this.textbox);
问：如何自定义设置图形对象控制点？（以path对象为例）
答：（1） 设置控制点是否展示setControlVisible
fabric.Path.prototype.setControlVisible('tl', false); // 左上
fabric.Path.prototype.setControlVisible('ml', false); // 左中点
fabric.Path.prototype.setControlVisible('mtr', false); // 控制旋转
fabric.Path.prototype.setControlVisible('bl', false); // 左下点
fabric.Path.prototype.setControlVisible('mt', false); // 中上点
fabric.Path.prototype.setControlVisible('mb', false); // 中下点
fabric.Path.prototype.setControlVisible('tr', false); // 右上点
fabric.Path.prototype.setControlVisible('mr', false); // 右中点
fabric.Path.prototype.setControlVisible('br', false); // 右下点
（2）设置不展示控制边框 hasBorders
fabric.Path.prototype.hasBorders = false;
（3）自定义控制事件（如下将左上点设置为旋转事件）
 fabric.Path.prototype.controls.tl = new fabric.Control({
                   cursorStyle: 'pointer',
                            actionHandler: fabric.controlsUtils.rotationWithSnapping,
                            cursorStyleHandler: fabric.controlsUtils.rotationStyleHandler,
                            // 设置控制点大小
                            cornerSize: 10
new fabric.Control属性如下：
x和y：表示控制点距离对象中心点的位置，坐标轴横轴左负右正，纵轴上负下正。
cursorStyle：光标移动到控制点上时的样式。可选的值有w/e/s/n-resize、pointer等，即东西南北方向的箭头、手的图标等。
actionHandler：用户拖动该控制点时的动作处理器，这里使用默认的scalingX，即水平方向缩放处理器。以此类推，可选的控制器还有scalingY、scalingEqually（同时缩放X和Y）、rotationWithSnapping（旋转）等。
更多可选值见 源码 第7421行
render：渲染方法，调用现成的方法即可。
cornerSize：控制点大小，可以控制贴图的大小。
在网上看到一个可以自定义修改控制项的方法，还没有尝试过，后续再研究研究～～ 传送门
参考文章