You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
77 lines
2.0 KiB
TypeScript
77 lines
2.0 KiB
TypeScript
/*
|
|
* @Author: 秦少卫
|
|
* @Date: 2023-06-15 22:49:42
|
|
* @LastEditors: donghao donghao@supervision.ltd
|
|
* @LastEditTime: 2024-08-06 17:14:20
|
|
* @Description: 居中对齐插件
|
|
*/
|
|
|
|
import { fabric } from "fabric";
|
|
import Editor from "../core";
|
|
type IEditor = Editor;
|
|
|
|
class CenterAlignPlugin {
|
|
public canvas: fabric.Canvas;
|
|
public editor: IEditor;
|
|
static pluginName = "CenterAlignPlugin";
|
|
static apis = ["centerH", "center", "position", "centerV"];
|
|
// public hotkeys: string[] = ['space'];
|
|
constructor(canvas: fabric.Canvas, editor: IEditor) {
|
|
this.canvas = canvas;
|
|
this.editor = editor;
|
|
}
|
|
|
|
center(workspace: fabric.Rect, object: fabric.Object) {
|
|
const center = workspace.getCenterPoint();
|
|
return this.canvas._centerObject(object, center);
|
|
}
|
|
|
|
centerV(workspace: fabric.Rect, object: fabric.Object) {
|
|
return this.canvas._centerObject(
|
|
object,
|
|
new fabric.Point(object.getCenterPoint().x, workspace.getCenterPoint().y)
|
|
);
|
|
}
|
|
|
|
centerH(workspace: fabric.Rect, object: fabric.Object) {
|
|
return this.canvas._centerObject(
|
|
object,
|
|
new fabric.Point(workspace.getCenterPoint().x, object.getCenterPoint().y)
|
|
);
|
|
}
|
|
|
|
position(name: "centerH" | "center" | "centerV") {
|
|
const anignType = ["centerH", "center", "centerV"];
|
|
const activeObject = this.canvas.getActiveObject();
|
|
if (anignType.includes(name) && activeObject) {
|
|
const defaultWorkspace = this.canvas
|
|
.getObjects()
|
|
.find(item => item.id === "workspace");
|
|
if (defaultWorkspace) {
|
|
console.log(this[name]);
|
|
this[name](defaultWorkspace, activeObject);
|
|
}
|
|
this.canvas.renderAll();
|
|
}
|
|
}
|
|
|
|
contextMenu() {
|
|
const activeObject = this.canvas.getActiveObject();
|
|
if (activeObject) {
|
|
return [
|
|
{
|
|
text: "水平垂直居中",
|
|
hotkey: "Ctrl+V",
|
|
disabled: false,
|
|
onclick: () => this.position("center")
|
|
}
|
|
];
|
|
}
|
|
}
|
|
destroy() {
|
|
console.log("pluginDestroy");
|
|
}
|
|
}
|
|
|
|
export default CenterAlignPlugin;
|