<template>
|
<div class="home">
|
<el-container direction="vertical">
|
<!-- 头部区域 -->
|
<Top v-if="state.show" :ruler="state.ruler" @update:ruler="rulerSwitch"></Top>
|
<el-main style="position: relative; display: flex; padding: 0; height: calc(100vh - 64px)">
|
<!-- 左侧区域 -->
|
<Left v-if="state.show"></Left>
|
<!-- 画布区域 -->
|
<div id="workspace">
|
<div class="canvas-box">
|
<div class="inside-shadow"></div>
|
<canvas id="canvas" :class="state.ruler ? 'design-stage-grid' : ''"></canvas>
|
<!-- <dragMode v-if="state.show"></dragMode>
|
<zoom></zoom> -->
|
</div>
|
</div>
|
<Right v-if="state.show"></Right>
|
</el-main>
|
</el-container>
|
</div>
|
</template>
|
|
<script name="Home" setup lang="ts">
|
import Top from './viewcomponents/top/index.vue';
|
import Left from './viewcomponents/left/index.vue';
|
import Right from './viewcomponents/right/index.vue';
|
|
// import zoom from '@/components/zoom.vue';
|
// import dragMode from '@/components/dragMode.vue';
|
// 功能组件
|
import { fabric } from 'fabric';
|
|
import Editor, {
|
IEditor,
|
DringPlugin,
|
AlignGuidLinePlugin,
|
ControlsPlugin,
|
// ControlsRotatePlugin,
|
CenterAlignPlugin,
|
LayerPlugin,
|
CopyPlugin,
|
MoveHotKeyPlugin,
|
DeleteHotKeyPlugin,
|
GroupPlugin,
|
DrawLinePlugin,
|
GroupTextEditorPlugin,
|
GroupAlignPlugin,
|
WorkspacePlugin,
|
// HistoryPlugin,
|
FlipPlugin,
|
RulerPlugin,
|
MaterialPlugin,
|
WaterMarkPlugin,
|
FontPlugin,
|
PolygonModifyPlugin,
|
DrawPolygonPlugin,
|
FreeDrawPlugin,
|
PathTextPlugin,
|
PsdPlugin,
|
SimpleClipImagePlugin,
|
BarCodePlugin,
|
QrCodePlugin,
|
ImageStroke,
|
ResizePlugin,
|
LockPlugin,
|
AddBaseTypePlugin,
|
MaskPlugin,
|
} from '@muaitu/fabric-editor-core';
|
import { useTemplateDetailProvide } from './hooks/context';
|
import './styles/contextMenu.scss';
|
import './plugin/fabric-history';
|
import { MyHistoryPlugin } from './plugin/MyHistoryPlugin';
|
import { TemplateParamExtensionKey } from './customObject';
|
|
const route = useRoute();
|
const id = (route.params.id as string) ?? '';
|
|
useTemplateDetailProvide({ id });
|
// const { isLoading } = useQuery({
|
// queryKey: ['lgGigWorkerServices/getCustomerTemplateDetail', id],
|
// queryFn: async () => {
|
// return await lgGigWorkerServices.getCustomerTemplateDetail({
|
// id: id,
|
// });
|
// },
|
// enabled: !!id,
|
// placeholderData: () => ({} as API.GetCustomerTemplateDetailOutput),
|
// })
|
|
const APIHOST = 'https://www.kuaitu.cc';
|
|
// 创建编辑器
|
const canvasEditor = new Editor() as IEditor;
|
|
canvasEditor.setMaxListeners(Infinity);
|
|
const state = reactive({
|
show: false,
|
select: null,
|
ruler: true,
|
});
|
|
onMounted(() => {
|
// 初始化fabric
|
const canvas = new fabric.Canvas('canvas', {
|
fireRightClick: true, // 启用右键，button的数字为3
|
stopContextMenu: true, // 禁止默认右键菜单
|
controlsAboveOverlay: true, // 超出clipPath后仍然展示控制条
|
// imageSmoothingEnabled: false, // 解决文字导出后不清晰问题
|
preserveObjectStacking: true, // 当选择画布中的对象时，让对象不在顶层。
|
width: 595,
|
height: 842,
|
});
|
console.log('canvas: ', canvas);
|
|
// 初始化编辑器
|
canvasEditor.init(canvas, TemplateParamExtensionKey);
|
canvasEditor
|
.use(DringPlugin)
|
.use(PolygonModifyPlugin)
|
.use(AlignGuidLinePlugin)
|
.use(ControlsPlugin)
|
// .use(ControlsRotatePlugin)
|
.use(CenterAlignPlugin)
|
// .use(LayerPlugin)
|
.use(CopyPlugin)
|
.use(MoveHotKeyPlugin)
|
.use(DeleteHotKeyPlugin)
|
.use(GroupPlugin)
|
.use(DrawLinePlugin)
|
.use(GroupTextEditorPlugin)
|
.use(GroupAlignPlugin)
|
.use(WorkspacePlugin)
|
.use(MyHistoryPlugin)
|
.use(FlipPlugin)
|
.use(RulerPlugin)
|
.use(DrawPolygonPlugin)
|
.use(FreeDrawPlugin)
|
.use(PathTextPlugin)
|
.use(SimpleClipImagePlugin)
|
.use(BarCodePlugin)
|
.use(QrCodePlugin)
|
.use(FontPlugin, {
|
repoSrc: APIHOST,
|
})
|
.use(MaterialPlugin, {
|
repoSrc: APIHOST,
|
})
|
.use(WaterMarkPlugin)
|
.use(PsdPlugin)
|
.use(ImageStroke)
|
.use(ResizePlugin)
|
.use(LockPlugin)
|
.use(AddBaseTypePlugin)
|
.use(MaskPlugin);
|
|
state.show = true;
|
// 默认打开标尺
|
if (state.ruler) {
|
canvasEditor.rulerEnable();
|
}
|
});
|
|
onUnmounted(() => canvasEditor.destory());
|
const rulerSwitch = (val: any) => {
|
state.ruler = val;
|
if (val) {
|
canvasEditor.rulerEnable();
|
} else {
|
canvasEditor.rulerDisable();
|
}
|
// 使标尺开关组件失焦，避免响应键盘的空格事件
|
//@ts-ignore
|
document.activeElement.blur();
|
};
|
|
provide('fabric', fabric);
|
provide('canvasEditor', canvasEditor);
|
// provide('mixinState', mixinState);
|
</script>
|
|
<style lang="scss" scoped>
|
:deep(.el-header) {
|
--height: 45px;
|
display: flex;
|
justify-content: space-between;
|
padding: 0 0px;
|
height: var(--height);
|
border-bottom: 1px solid #eef2f8;
|
background: #ffffff;
|
line-height: var(--height);
|
}
|
|
.home,
|
.ivu-layout {
|
height: 100%;
|
}
|
|
.home {
|
:deep() {
|
.el-container {
|
height: 100%;
|
}
|
}
|
}
|
|
.icon {
|
display: block;
|
}
|
|
.canvas-box {
|
position: relative;
|
}
|
|
// 画布内阴影
|
|
.inside-shadow {
|
position: absolute;
|
z-index: 2;
|
width: 100%;
|
height: 100%;
|
box-shadow: inset 0 0 9px 2px #0000001f;
|
pointer-events: none;
|
}
|
|
#canvas {
|
margin: 0 auto;
|
width: 300px;
|
height: 300px;
|
}
|
|
#workspace {
|
position: relative;
|
overflow: hidden;
|
width: 100%;
|
background: #f1f1f1;
|
flex: 1;
|
}
|
|
// 标尺
|
|
.switch {
|
margin-right: 10px;
|
}
|
|
// 网格背景
|
|
.design-stage-grid {
|
--offsetX: 0px;
|
--offsetY: 0px;
|
--size: 16px;
|
--color: #dedcdc;
|
background-image: linear-gradient(
|
45deg,
|
var(--color) 25%,
|
transparent 0,
|
transparent 75%,
|
var(--color) 0
|
),
|
linear-gradient(45deg, var(--color) 25%, transparent 0, transparent 75%, var(--color) 0);
|
background-position: var(--offsetX) var(--offsetY),
|
calc(var(--size) + var(--offsetX)) calc(var(--size) + var(--offsetY));
|
background-size: calc(var(--size) * 2) calc(var(--size) * 2);
|
}
|
</style>
|
