配置控制

配置控制操作

通过配置对象的控制操作属性，来自定义控制点的行为。

配置控制操作方法

FabricJS 对象的控制操作具有默认配置，这些配置由控制操作类和对象的默认值定义。这里列出了受影响属性 Object Props 和 Border Props：

  /**
   * 对象控制点的大小 (单位：像素)
   * @type Number
   * @default 13
   */
  cornerSize: number;

  /**
   * 当触摸时对象控制点的大小
   * @type Number
   * @default 24
   */
  touchCornerSize: number;

  /**
   * 当为真时，对象的控制角点将以透明的填充呈现（即显示为描边而非填充）
   * @type Boolean
   * @default true
   */
  transparentCorners: boolean;

  /**
   * 对象控制角点的颜色（当对象处于激活状态时）
   * @type String
   * @default rgb(178,204,255)
   */
  cornerColor: string;

  /**
   * 对象控制角点的颜色（当对象处于激活状态且透明角点关闭时）
   * @since 1.6.2
   * @type String
   * @default ''
   */
  cornerStrokeColor: string;

  /**
   *“指定控制样式，'rect' 或 'circle'
   *该选项已弃用。未来将会有一个标准的控制渲染方式
   *并且你可以通过控制 API 使用提供的替代方案。”**
   * @since 1.6.2
   * @type 'rect' | 'circle'
   * @default 'rect'
   * @deprecated
   */
  cornerStyle: 'rect' | 'circle';

  /**
   * 指定对象控制线段虚线模式的数组（必须启用边框才有效）
   * @since 1.6.2
   * @type Array | null
   * @default null
   */
  cornerDashArray: number[] | null;

  /**
   * 对象与其控制边框之间的内边距（单位：像素）
   * @type Number
   * @default 0
   */
  padding: number;

  /**
 * 对象控制边框的颜色（当对象处于激活状态时）
 * @type string
 * @default rgb(178,204,255)
 */
  borderColor: string;

/**
 * 指定对象边框的虚线模式的数组（必须启用边框）
 * @since 1.6.2
 * @type Array | null
 * @default null
 */
  borderDashArray: number[] | null;

/**
 * 当设置为 `false` 时，对象的控制边框不显示
 * @type boolean
 * @default true
 */
  hasBorders: boolean;

/**
 * 当对象处于激活状态并且正在移动时，控制边框的透明度
 * @type Number
 * @default 0.4
 */
  borderOpacityWhenMoving: number;

/**
 * 对象控制边框的缩放因子
 * 较大的值将使边框更粗
 * 边框默认是1，因此这基本上控制了边框的厚度
 * 因为无法直接更改边框本身
 * @type Number
 * @default 1
 */
  borderScaleFactor: number;

这些默认值使得控制操作呈现如下效果： controls

现在让我们更改一些基础属性。在下面的示例中，注释并更改属性以查看效果：

const canvas = new fabric.Canvas(canvasEl);

const text = new fabric.FabricText('Fabric.JS', {
  cornerStyle: 'round',
  cornerStrokeColor: 'blue',
  cornerColor: 'lightblue',
  cornerStyle: 'circle',
  padding: 10,
  transparentCorners: false,
  cornerDashArray: [2, 2],
  borderColor: 'orange',
  borderDashArray: [3, 1, 3],
  borderScaleFactor: 2,
});
canvas.add(text);
canvas.centerObject(text);
canvas.setActiveObject(text)

配置所有对象的控制操作

现在，每个对象在创建时都会被传递使用默认选项，或者可以创建一个函数来修改 FabricJS 的控制操作默认值。

const canvas = new fabric.Canvas(canvasEl);

fabric.InteractiveFabricObject.ownDefaults = {
    ...fabric.InteractiveFabricObject.ownDefaults,
    cornerStyle: 'round',
    cornerStrokeColor: 'blue',
    cornerColor: 'lightblue',
    cornerStyle: 'circle',
    padding: 10,
    transparentCorners: false,
    cornerDashArray: [2, 2],
    borderColor: 'orange',
    borderDashArray: [3, 1, 3],
    borderScaleFactor: 2,
}

const text = new fabric.FabricText('Fabric.JS');
const rect = new fabric.Rect({ width: 100, height: 100, fill: 'green' });

canvas.add(text, rect);
canvas.centerObject(text);
canvas.setActiveObject(text);

配置不同对象的控制操作

现在，如果你必须为对象添加一个额外的或者不同的控制操作，那么你可以将一个控制操作对象添加到指定对象上。你的对象的控制操作对象是在构造函数中创建的，由于每个实例都是不同的，所以可以避免意外副作用的发生。

const canvas = new fabric.Canvas(canvasEl);

const text = new fabric.FabricText('Fabric.JS', { controls: {
    ...fabric.FabricText.createControls().controls,
    mySpecialControl: new fabric.Control({
        x: -0.5,
        y: 0.25,
    }),
} });
const rect = new fabric.Rect({ width: 100, height: 100, fill: 'green', controls: {
    ...fabric.FabricText.createControls().controls,
    mySpecialControl: new fabric.Control({
        x: 0.5,
        y: -0.25,
    }),
} });

canvas.add(text, rect);
canvas.centerObject(text);
canvas.setActiveObject(text);

如果你不喜欢这样，你也可以直接修改createControls静态函数的输出：

const canvas = new fabric.Canvas(canvasEl);

fabric.Textbox.createControls = () => {
  const controls = fabric.controlsUtils.createTextboxDefaultControls();
  delete controls.mtr;
  return {
    controls: {
      ...controls,
      mySpecialControl: new fabric.Control({
        x: -0.5,
        y: 0.25,
      }),
    }
  }
}

const text = new fabric.Textbox('Fabric.JS');
const text2 = new fabric.Textbox('Fabric.JS');

canvas.add(text, text2);
canvas.centerObject(text);
canvas.setActiveObject(text);

这个设置依然给你提供了单独设置对象的控制操作，以避免冲突。如果你正在寻找一种“设置后即可忘记”的配置方式，上述示例可能是最佳方法。

你可以更进一步地按你所需来共享和设置。如果你希望有一个实例之间共享的控制操作，你必须再次操作默认配置。这将使你能够为所有类一次性配置控制操作，并且允许你在运行时全局添加控制操作。

每一种设置都有优缺点，这取决于你个人喜好和项目需求。如下的代码段，你愮按下runMe运行。一旦运行，上面的片段也会受到影响。

const canvas = new fabric.Canvas(canvasEl);

// deactivate constructor control assignment
fabric.InteractiveFabricObject.createControls = () => {
    return {};
}

const controls = fabric.controlsUtils.createObjectDefaultControls();
delete controls.mtr;
fabric.InteractiveFabricObject.ownDefaults.controls = {
    ...controls,
    mySpecialControl: new fabric.Control({
      x: -0.5,
      y: 0.25,
    }),
}

const rect = new fabric.Rect({ width: 100, height: 100, fill: 'green' });
const rect2 = new fabric.Rect({ width: 100, height: 100, fill: 'orange', top: 100, left: 200 });

// adding a control dynamically after creation of instances on defaults will have effect on every object
fabric.InteractiveFabricObject.ownDefaults.controls.myOtherControls = new fabric.Control({
  x: 0.5,
  y: -0.25,
});

canvas.add(rect, rect2);
canvas.centerObject(rect);
canvas.setActiveObject(rect);

你可以给所有对象全局添加和删除控制操作，这意味着每个对象共享同一个控制操作设置。 目前没有在不完全替换控制操作设置的情况下，修改单个对象的方法 你可以根据需要来交换预制的控制操作设置。

你也可以创建完全定制的控制操作，更多信息请查看此处的示例：