<template>
|
<div
|
id="dynamic-picture-div"
|
class="dynamic-picture"
|
v-show="state.m_visibleDynamicPic"
|
v-loading="state.m_loadingDynamicPic"
|
>
|
<div
|
class="draw-tools"
|
v-show="
|
(state.m_Note == '' || !state.m_Note) && state.m_visibleDynamicPic
|
"
|
>
|
<span @click="resizeDrawContiner"
|
><el-icon> <HomeFilled /> </el-icon
|
>{{ t("detailPage.resize.TR") }}</span
|
>
|
<span @click="changeEnlarge"
|
><el-icon> <ZoomIn /> </el-icon>{{ t("detailPage.zoomIn.TR") }}</span
|
>
|
<span @click="changeNarrow"
|
><el-icon> <ZoomOut /> </el-icon>{{ t("detailPage.zoomOut.TR") }}</span
|
>
|
<span @click="changeRotateLeft"
|
><el-icon> <RefreshLeft /> </el-icon>{{ t("detailPage.leftRotation.TR") }}</span
|
>
|
<span @click="changeRotateRight"
|
><el-icon> <RefreshRight /> </el-icon>{{ t("detailPage.rightRotation.TR") }}</span
|
>
|
<span
|
class="user-select-none"
|
@mousedown="mouseDownLineHightEditArea"
|
@mouseup="mouseUpLineHightEditArea"
|
><el-icon> <Flag /> </el-icon
|
>{{ t("detailPage.highlightModifyArea.TR") }}</span
|
>
|
<el-dropdown @command="handleExportCommand" class="h100">
|
<span class="draw-tools-span">
|
<el-icon>
|
<Picture />
|
</el-icon>
|
{{ t("ebookPage.export.TR") }}{{ t("detailPage.picture.TR") }}
|
</span>
|
<template #dropdown>
|
<el-dropdown-menu>
|
<el-dropdown-item command="png">PNG</el-dropdown-item>
|
<el-dropdown-item command="jpg">JPG</el-dropdown-item>
|
</el-dropdown-menu>
|
</template>
|
</el-dropdown>
|
<span
|
class="user-select-none is-disabled"
|
@click="moveText"
|
:class="state.m_isMoveText ? 'click-active-style' : ''"
|
><el-icon> <Rank /></el-icon>{{ t("detailPage.move.TR") }}
|
</span>
|
<!-- <span
|
class="user-select-none"
|
@click="viewClickPoint"
|
:class="state.m_isViewClickPoint ? 'click-active-style' : ''"
|
><el-icon> <View /> </el-icon>显示点前点击的坐标
|
</span> -->
|
</div>
|
<div
|
class="draw-continer"
|
ref="drawingContentRef"
|
:id="props.domId"
|
v-show="
|
(state.m_Note == '' || !state.m_Note) && state.m_visibleDynamicPic
|
"
|
></div>
|
<!-- 文本提示 -->
|
<div
|
class="justify-content-center align-items-center w100"
|
v-show="state.m_Note && state.m_Note !== ''"
|
style="color: red; height: calc(100% - 0.28rem)"
|
:style="
|
state.m_Note && state.m_Note !== '' ? 'display:flex;' : 'display:none;'
|
"
|
>
|
{{ state.m_Note }}
|
</div>
|
<!-- 鼠标点击画布的坐标 -->
|
<div
|
style="
|
position: absolute;
|
top: 40px;
|
right: 100px;
|
border: 1px solid #16b5cb;
|
"
|
v-show="state.m_isViewClickPoint"
|
>
|
<span style="color: #16b5cb">x:{{ state.curClickPoint.x }}</span>
|
<span style="color: #16b5cb">y:{{ state.curClickPoint.y }}</span>
|
</div>
|
</div>
|
<el-dialog
|
v-model="state.dialogVisible"
|
:title="t('swproject.editProject.TR')"
|
width="500"
|
draggable
|
align-center
|
cenetr
|
>
|
<el-form :model="state.editformData" label-width="140px">
|
<el-form-item label="ID" prop="id">
|
<el-input v-model="state.editformData.id" disabled></el-input>
|
</el-form-item>
|
<el-form-item :label="t('detailPage.textContent.TR')" prop="text">
|
<el-input v-model="state.editformData.text"></el-input>
|
</el-form-item>
|
<el-form-item :label="t('detailPage.rotationAngle.TR')" prop="rotation">
|
<el-input v-model="state.editformData.rotation"></el-input>
|
</el-form-item>
|
<el-form-item :label="t('detailPage.fontSize.TR')" prop="fontSize">
|
<el-input v-model="state.editformData.fontSize"></el-input>
|
</el-form-item>
|
<el-form-item
|
:label="t('detailPage.alignmentMethod.TR')"
|
prop="alignMethod"
|
>
|
<el-input v-model="state.editformData.alignMethod" readonly></el-input>
|
</el-form-item>
|
<!-- <el-form-item label="坐标点" prop="point">
|
<el-input v-model="state.editformData.point" readonly></el-input>
|
</el-form-item> -->
|
<el-form-item :label="t('detailPage.fontColor.TR')" prop="fill">
|
<el-color-picker color-format="rgb" v-model="state.editformData.fill" />
|
</el-form-item>
|
<el-form-item prop="text">
|
<div class="flex">
|
<el-checkbox v-model="state.editformData.fontWeight">{{
|
t("detailPage.blod.TR")
|
}}</el-checkbox>
|
<el-checkbox v-model="state.editformData.italic">{{
|
t("detailPage.italic.TR")
|
}}</el-checkbox>
|
</div>
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button @click="closeDialog">{{
|
t("detailPage.cancel.TR")
|
}}</el-button>
|
<el-button type="primary" @click="confirmDialog">
|
{{ t("detailPage.define.TR") }}
|
</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</template>
|
<script name="dynamicPicture" setup>
|
import { ref, reactive, onUnmounted, toRefs } from "vue";
|
import {
|
App,
|
Box,
|
LeaferEvent,
|
Image,
|
ImageEvent,
|
Text,
|
PointerEvent,
|
Debug,
|
} from "leafer-ui";
|
import { ElMessage } from "element-plus";
|
import waterMarkHelper from "@/utils/waterMarkHelper.js";
|
import { useI18n } from "vue-i18n";
|
import utilHelper from "@/utils/utils.js";
|
import "@leafer-in/editor";
|
import "@leafer-in/view";
|
|
const { t } = useI18n();
|
// 需要调试时设置为true
|
Debug.showWarn = true;
|
const props = defineProps({
|
domId: { type: String, default: null },
|
VisibilityTools: { type: Boolean, default: true },
|
});
|
|
const { domId, VisibilityTools } = toRefs(props);
|
|
const m_TextAlign = {
|
0: "left", //左对齐
|
1: "center", //居中对齐
|
2: "right", //右对齐
|
};
|
const m_VerticalAlign = {
|
0: "top", // 顶部对齐
|
1: "middle", //垂直居中对齐
|
2: "bottom", //底部对齐
|
};
|
const m_PointAnchor = {
|
0: { textAlign: m_TextAlign[0], verticalAlign: m_VerticalAlign[0] }, //左上
|
1: { textAlign: m_TextAlign[1], verticalAlign: m_VerticalAlign[0] }, //中上
|
2: { textAlign: m_TextAlign[2], verticalAlign: m_VerticalAlign[0] }, //右上
|
3: { textAlign: m_TextAlign[0], verticalAlign: m_VerticalAlign[1] }, //左垂直居中,
|
4: { textAlign: m_TextAlign[1], verticalAlign: m_VerticalAlign[1] }, //水平垂直居中,
|
5: { textAlign: m_TextAlign[2], verticalAlign: m_VerticalAlign[1] }, //右垂直居中,
|
6: { textAlign: m_TextAlign[0], verticalAlign: m_VerticalAlign[2] }, //左下
|
7: { textAlign: m_TextAlign[1], verticalAlign: m_VerticalAlign[2] }, //中下
|
8: { textAlign: m_TextAlign[2], verticalAlign: m_VerticalAlign[2] }, //右下
|
};
|
|
const m_AroundEnum = {
|
0: "top-left",
|
1: "top",
|
2: "top-right",
|
3: "left",
|
4: "center",
|
5: "right",
|
6: "bottom-left",
|
7: "bottom",
|
8: "bottom-right",
|
};
|
|
const drawingContentRef = ref(null);
|
const state = reactive({
|
m_pumpBaseInfo: {},
|
m_pageBaseInfo: {},
|
m_dispData: [],
|
m_drawElementTextList: [],
|
m_group: null,
|
m_Image: null,
|
m_app: null,
|
m_isMoveText: false,
|
m_loadingDynamicPic: false,
|
m_visibleDynamicPic: false,
|
editformData: {
|
id: "",
|
tag: "",
|
text: "",
|
fontSize: "",
|
rotation: "",
|
fill: "",
|
fontWeight: false, //是否加粗
|
italic: false, //是否斜体
|
alignMethod: "",
|
point: "", //定位点
|
},
|
m_Note: "",
|
m_imgPath: "",
|
m_isViewClickPoint: false,
|
curClickPoint: {
|
x: 0,
|
y: 0,
|
},
|
m_curRotation: 0,
|
});
|
onUnmounted(async () => {
|
state.m_app && (await state.m_app.destroy());
|
});
|
|
// 初始化动态图
|
const initDynamicPictureData = (data) => {
|
state.m_pageBaseInfo = data;
|
state.m_pumpBaseInfo = data.pumpBaseInfo ?? {};
|
state.m_Note = data.note;
|
if (!data.isSuccess) return;
|
if (!data.allTextInfo || data.allTextInfo.length == 0) {
|
state.m_Note = "文字配置数据为空";
|
return;
|
}
|
if (!data.filepath || data.filepath == "") {
|
return;
|
}
|
let dataList = data.allTextInfo.map((item) => {
|
return {
|
DisplayText: item.DisplayText,
|
SourceType: item.SourceType,
|
SourceID: item.SourceID,
|
ID: item.ID,
|
PreviousID: item.PreviousID,
|
Name: item.Name,
|
AllowEdit: item.AllowEdit,
|
Level: item.Level,
|
Description: item.Description,
|
Tag: item.Tag,
|
CadKey: item.CadKey,
|
HAlignment: item.HAlignment,
|
VAlignment: item.VAlignment,
|
X: item.Point.x,
|
Y: item.Point.y,
|
PointAnchor: item.PointAnchor,
|
FontName: item.FontName,
|
FontSize: item.FontSize,
|
FontColor: item.FontColor,
|
IsBold: item.IsBold,
|
IsItalic: item.IsItalic,
|
Angle: item.Angle,
|
DefaultText: item.DefaultText,
|
ScaleX: item.ScaleX,
|
ScaleY: item.ScaleY,
|
};
|
});
|
state.m_dispData = dataList;
|
|
let strWithForwardSlashes = state.m_pageBaseInfo.filepath.replace(/\\/g, "/");
|
let imgPath =
|
window.globalConfig.WebApiUrl.FileUrl + "Data/" + strWithForwardSlashes;
|
state.m_imgPath = imgPath;
|
waterMarkHelper.addImage(imgPath, null, (base64Url) => {
|
imgPath = base64Url;
|
initDrawView(imgPath);
|
});
|
};
|
//初始化绘制视图
|
const initDrawView = async (imgPath) => {
|
if (state.m_app) {
|
state.m_app.tree && (await state.m_app.tree.clear());
|
}
|
let el = document.getElementById("dynamic-picture-div");
|
let width = el.parentElement.clientWidth;
|
let height = el.parentElement.clientHeight;
|
const m_app = new App({
|
view: domId.value,
|
fill: "#e1e2e3",
|
smooth: true,
|
width: width,
|
height: height - 28,
|
editor: {
|
editing: false,
|
visible: false,
|
hittable: false,
|
selector: true,
|
boxSelect: false, //是否能框选
|
rotateable: false, //是否能旋转
|
skewable: false,
|
hideOnMove: false, //编辑框是否移动时隐藏
|
stroke: "#0d99ff",
|
editSize: "font-size",
|
pointSize: 5,
|
pointRadius: 0,
|
moveable: false, //是否移动
|
resizeable: false, //是否缩放
|
},
|
wheel: {
|
zoomMode: true,
|
zoomSpeed: 0.01,
|
},
|
});
|
|
const group = new Box({
|
x: 0,
|
y: 0,
|
draggable: true,
|
children: [],
|
});
|
|
const image = new Image({
|
url: imgPath,
|
draggable: false,
|
align: "center",
|
});
|
|
// 默认锁定元素
|
m_app.editor.lock();
|
|
//监听应用视图是否准备就绪
|
m_app.on(LeaferEvent.VIEW_COMPLETED, () => {
|
m_app.tree.zoom("fit", [0, 0]);
|
});
|
|
// 鼠标点击事件
|
m_app.on(PointerEvent.TAP, pointEventTap);
|
|
state.m_group = group;
|
state.m_Image = image;
|
state.m_app = m_app;
|
|
setDrawContent();
|
};
|
|
const setDrawContent = () => {
|
const image = state.m_Image;
|
// 监听图片加载完成
|
image.once(ImageEvent.LOADED, (e) => {
|
// 获取图片真实宽、高
|
const pic_real_width = image.width;
|
const pic_real_height = image.height;
|
|
image.width = pic_real_width;
|
image.height = pic_real_height;
|
//设置图片绘制位置为左上角
|
image.x = 0;
|
image.y = 0;
|
|
let textList = [];
|
for (let i = 0; i < state.m_dispData.length; i++) {
|
let vl = state.m_dispData[i];
|
|
const text = Text.one({
|
// data属性为自定义属性
|
data: {
|
id: vl.ID,
|
tag: "text",
|
text: vl.DisplayText,
|
rotation: vl.Angle,
|
fill: stringColorToRgb(vl.FontColor.split(",")),
|
fontSize: vl.FontSize,
|
point: `x:${vl.X},y:${vl.Y}`,
|
fontWeight: vl.IsBold ? 600 : 200,
|
pointAnchor: vl.PointAnchor,
|
italic: vl.IsItalic,
|
displayText: vl.DisplayText ? vl.DisplayText : " ",
|
defaultText: vl.DefaultText ? vl.DefaultText : " ",
|
name: vl.Name,
|
isEdit: false, //是否修改过
|
},
|
editable: true,
|
padding: [0, 5, 0, 5],
|
x: vl.X,
|
y: vl.Y,
|
fill: stringColorToRgb(vl.FontColor.split(",")),
|
strokeWidth: 3,
|
text: vl.DisplayText ? vl.DisplayText : " ",
|
textAlign: m_PointAnchor[vl.PointAnchor].textAlign,
|
verticalAlign: m_PointAnchor[vl.PointAnchor].verticalAlign,
|
around: m_AroundEnum[vl.PointAnchor],
|
fontFamily: vl.FontName,
|
fontSize: vl.FontSize,
|
fontWeight: vl.IsBold ? 600 : 200,
|
StrokeAlign: "outside",
|
cursor: "pointer",
|
});
|
text.rotateOf("center", vl.Angle - text.rotation);
|
textList.push(text);
|
state.m_group.add(text);
|
|
//#region 测试用 显示定位锚点
|
// const ellipse = new Ellipse({
|
// width: 2,
|
// height: 2,
|
// x: vl.X,
|
// y: vl.Y,
|
// fill: "rgb(255,0,0)",
|
// });
|
// state.m_group.add(ellipse);
|
//#endregion
|
|
state.m_drawElementTextList = textList;
|
}
|
});
|
image.once(ImageEvent.ERROR, (e) => {
|
console.log(e.error);
|
});
|
state.m_group.add(image);
|
|
state.m_app.tree.add(state.m_group);
|
};
|
|
const updateDrawView = (data) => {
|
state.m_pageBaseInfo = data;
|
state.m_Note = data.note;
|
if (!data.isSuccess) return;
|
if (!data.allTextInfo || data.allTextInfo.length == 0) {
|
state.m_Note = "文字配置数据为空";
|
return;
|
}
|
if (!data.filepath || data.filepath == "") {
|
return;
|
}
|
let strWithForwardSlashes = state.m_pageBaseInfo.filepath.replace(/\\/g, "/");
|
let imgPath =
|
window.globalConfig.WebApiUrl.FileUrl + "Data/" + strWithForwardSlashes;
|
|
if (imgPath !== state.m_imgPath) {
|
state.m_imgPath == imgPath;
|
}
|
let dataList = data.allTextInfo.map((item) => {
|
return {
|
DisplayText: item.DisplayText,
|
SourceType: item.SourceType,
|
SourceID: item.SourceID,
|
ID: item.ID,
|
PreviousID: item.PreviousID,
|
Name: item.Name,
|
AllowEdit: item.AllowEdit,
|
Level: item.Level,
|
Description: item.Description,
|
Tag: item.Tag,
|
CadKey: item.CadKey,
|
HAlignment: item.HAlignment,
|
VAlignment: item.VAlignment,
|
X: item.Point.x,
|
Y: item.Point.y,
|
PointAnchor: item.PointAnchor,
|
FontName: item.FontName,
|
FontSize: item.FontSize,
|
FontColor: item.FontColor,
|
IsBold: item.IsBold,
|
IsItalic: item.IsItalic,
|
Angle: item.Angle,
|
DefaultText: item.DefaultText,
|
ScaleX: item.ScaleX,
|
ScaleY: item.ScaleY,
|
};
|
});
|
state.m_dispData = dataList;
|
|
waterMarkHelper.addImage(imgPath, null, (base64Url) => {
|
resetDraw();
|
imgPath = base64Url;
|
initDrawView(imgPath);
|
});
|
};
|
const refreshPropValue = (prop) => {
|
//console.log(prop);
|
var source_id = prop.ID.toString();
|
if (prop.ID < 10) source_id = "PR-000" + prop.ID.toString();
|
else if (prop.ID < 100) source_id = "PR-00" + prop.ID.toString();
|
else if (prop.ID < 1000) source_id = "PR-0" + prop.ID.toString();
|
else if (prop.ID < 10000) source_id = "PR-" + prop.ID.toString();
|
else return;
|
|
for (var i = 0; i < state.m_dispData.length; i++) {
|
if (state.m_dispData[i].SourceType != 0) continue;
|
if (state.m_dispData[i].SourceID != source_id) continue;
|
|
state.m_dispData[i].DefaultText = prop.PropValue;
|
state.m_dispData[i].DisplayText = prop.PropValue;
|
refreshDrawTextByProp(state.m_dispData[i]);
|
return;
|
}
|
};
|
// 重置画布
|
const resetDraw = async () => {
|
state.m_app.tree.clear();
|
// state.m_app && (await );
|
// state.m_group.remove();
|
// state.m_Image && state.m_Image.clear();
|
};
|
// 确认修改
|
const confirmDialog = () => {
|
state.m_drawElementTextList.forEach((item) => {
|
let currentEditText = item;
|
if (currentEditText.data.id == state.editformData.id) {
|
state.editformData.fontWeight = state.editformData.fontWeight ? 600 : 200;
|
// 设置修改的样式属性
|
currentEditText.setAttr("text", state.editformData.text);
|
currentEditText.setAttr("fill", state.editformData.fill);
|
currentEditText.setAttr("fontSize", state.editformData.fontSize);
|
currentEditText.setAttr("fontWeight", state.editformData.fontWeight);
|
currentEditText.setAttr("italic", state.editformData.italic);
|
currentEditText.rotateOf(
|
"center",
|
state.editformData.rotation - currentEditText.rotation
|
);
|
|
currentEditText.data.text = state.editformData.text;
|
currentEditText.data.fill = state.editformData.fill;
|
currentEditText.data.rotation = state.editformData.rotation;
|
currentEditText.data.fontSize = Number(state.editformData.fontSize);
|
currentEditText.data.fontWeight = state.editformData.fontWeight;
|
currentEditText.data.italic = state.editformData.italic;
|
currentEditText.data.isEdit = true;
|
}
|
});
|
state.dialogVisible = false;
|
return;
|
};
|
// 根据修改的属性刷新画布上的文字
|
const refreshDrawTextByProp = (prop) => {
|
state.m_drawElementTextList.forEach((item) => {
|
let currentEditTextEl = item;
|
if (currentEditTextEl.data.id == prop.ID) {
|
prop.IsBold = prop.IsBold ? 600 : 200;
|
// 设置修改的样式属性
|
currentEditTextEl.setAttr("text", prop.DisplayText);
|
currentEditTextEl.data.text = prop.DisplayText;
|
}
|
});
|
};
|
// 复原图像
|
const resizeDrawContiner = () => {
|
let origin = { x: 0, y: 0 };
|
let rotation = -(state.m_curRotation);
|
state.m_group.rotateOf(origin, rotation);
|
state.m_app.tree.zoom("fit", [0, 0]);
|
state.m_curRotation = 0;
|
};
|
// 放大
|
const changeEnlarge = () => {
|
state.m_app.tree.zoom("in");
|
};
|
// 缩小
|
const changeNarrow = () => {
|
state.m_app.tree.zoom("out");
|
};
|
//高亮显示修改区域
|
const mouseDownLineHightEditArea = () => {
|
// state.m_drawElementTextList.forEach((item) => {
|
// state.m_app.editor.target = item;
|
// });
|
state.m_app.editor.target = state.m_drawElementTextList;
|
};
|
// 取消高亮修改区域
|
const mouseUpLineHightEditArea = () => {
|
state.m_app.editor.target = [];
|
};
|
// 导出命令
|
const handleExportCommand = (fileType) => {
|
const exportOption = {
|
quality: 100, // 设置 jpg / webp 的图片质量
|
fill: "transparent", // 设置一个默认背景填充色
|
smooth: true,
|
pixelRatio: 2,
|
};
|
switch (fileType) {
|
case "png":
|
state.m_group
|
.export("png", exportOption)
|
.then((res) => {
|
let imgPath = res.data;
|
let fileName = `${state.m_pumpBaseInfo.PumpName}_${t(
|
"detailPage.assemblyDrawingSys.TR"
|
)}.png`;
|
utilHelper.downloadFile(imgPath, fileName);
|
// waterMarkHelper.addImage(imgPath, null, (base64Url) => {
|
// imgPath = base64Url;
|
// utilHelper.downloadFile(imgPath, 'screenshot.png')
|
// });
|
})
|
.catch((err) => {
|
console.log(err);
|
ElMessage.error("导出失败:" + err);
|
});
|
break;
|
case "jpg":
|
state.m_group
|
.export("jpg", exportOption)
|
.then((res) => {
|
let imgPath = res.data;
|
let fileName = `${state.m_pumpBaseInfo.PumpName}_${t(
|
"detailPage.assemblyDrawingSys.TR"
|
)}.jpg`;
|
utilHelper.downloadFile(imgPath, fileName);
|
// waterMarkHelper.addImage(imgPath, null, (base64Url) => {
|
// imgPath = base64Url;
|
// utilHelper.downloadFile(imgPath, 'screenshot.jpg')
|
// });
|
})
|
.catch((err) => {
|
console.log(err);
|
ElMessage.error("导出失败:" + err);
|
});
|
break;
|
default:
|
break;
|
}
|
};
|
// 左旋
|
const changeRotateLeft = () => {
|
let origin = { x: 0, y: 0 };
|
state.m_curRotation = state.m_curRotation - 90;
|
|
let rotation = -90
|
state.m_group.rotateOf(origin, rotation);
|
state.m_app.tree.zoom("fit", [0, 0]);
|
};
|
//右旋
|
const changeRotateRight = () => {
|
let origin = { x: 0, y: 0 };
|
state.m_curRotation = state.m_curRotation + 90;
|
let rotation = 90
|
state.m_group.rotateOf(origin, rotation);
|
state.m_app.tree.zoom("fit", [0, 0]);
|
};
|
// 是否可移动文字
|
const moveText = () => {
|
return;
|
state.m_isMoveText = !state.m_isMoveText;
|
if (state.m_isMoveText) {
|
state.m_app.editor.config.moveable = true;
|
state.m_app.editor.unlock();
|
} else {
|
state.m_app.editor.config.moveable = false;
|
state.m_app.editor.lock();
|
}
|
};
|
const viewClickPoint = () => {
|
state.m_isViewClickPoint = !state.m_isViewClickPoint;
|
};
|
// 鼠标点击事件
|
const pointEventTap = (e) => {
|
let { x, y } = state.m_Image.getLocalPoint({ x: e.x, y: e.y });
|
state.curClickPoint.x = x;
|
state.curClickPoint.y = y;
|
|
// 判断当前是否是可移动文字状态
|
if (state.m_isMoveText) {
|
return;
|
}
|
const data = e.target.data;
|
if (data.tag == "text") {
|
// 对齐方式
|
let alignMethod = `${capitalizeFirstLetter(
|
m_PointAnchor[data.pointAnchor].verticalAlign
|
)}${capitalizeFirstLetter(m_PointAnchor[data.pointAnchor].textAlign)}`;
|
state.editformData.id = data.id;
|
state.editformData.tag = data.tag;
|
state.editformData.text = data.text;
|
state.editformData.rotation = data.rotation;
|
state.editformData.fill = data.fill;
|
state.editformData.fontSize = data.fontSize;
|
state.editformData.fontWeight = data.fontWeight == 200 ? false : true;
|
state.editformData.italic = data.italic;
|
state.editformData.alignMethod = alignMethod;
|
state.editformData.point = data.point;
|
state.dialogVisible = true;
|
}
|
};
|
const closeDialog = () => {
|
state.dialogVisible = false;
|
};
|
//字符串转rgb
|
const stringColorToRgb = (str) => {
|
return "rgb(" + str[0] + "," + str[1] + "," + str[2] + ")";
|
};
|
const getAssemDynFileSys = () => {
|
let AllTextInfo = [];
|
state.m_drawElementTextList.forEach((item) => {
|
if (item.data.isEdit == true) {
|
AllTextInfo.push({
|
BodyText: item.text,
|
ID: item.data.id,
|
});
|
}
|
});
|
return {
|
TemplateFilePath: state.m_pageBaseInfo.filepath,
|
AllTextInfo: AllTextInfo,
|
};
|
};
|
// 字符串首字母大写
|
const toggleDynamicPicVisible = (status) => {
|
state.m_visibleDynamicPic = status;
|
};
|
|
const capitalizeFirstLetter = (str) => {
|
return str.charAt(0).toUpperCase() + str.slice(1);
|
};
|
defineExpose({
|
initDynamicPictureData,
|
getAssemDynFileSys,
|
toggleDynamicPicVisible,
|
initDrawView,
|
updateDrawView,
|
refreshPropValue,
|
});
|
</script>
|
|
<style lang="scss" scoped>
|
.dynamic-picture {
|
width: 100%;
|
height: 100%;
|
position: relative;
|
|
.draw-tools {
|
background-color: #fff;
|
width: 100%;
|
height: 0.28rem;
|
display: flex;
|
justify-content: flex-start;
|
align-items: center;
|
gap: 0.1rem;
|
padding: 0 0.1rem;
|
box-sizing: border-box;
|
box-shadow: inset 0px -1px 0px rgb(0, 0, 0, 0.1);
|
|
& > i {
|
font-size: 0.2rem;
|
}
|
|
& > span {
|
display: inline-flex;
|
justify-content: center;
|
align-items: center;
|
color: #16b5cb;
|
cursor: pointer;
|
font-size: 0.14rem;
|
gap: 0.01rem;
|
padding: 0.05rem;
|
box-sizing: border-box;
|
|
&:hover {
|
opacity: 0.8;
|
box-shadow: inset 0px -2px 0px #002c66;
|
}
|
}
|
}
|
|
.draw-tools-span {
|
display: inline-flex;
|
justify-content: center;
|
align-items: center;
|
color: #16b5cb;
|
cursor: pointer;
|
font-size: 0.14rem;
|
gap: 0.01rem;
|
outline: unset;
|
padding: 0.05rem;
|
|
&:hover {
|
// background-color: #abccea;
|
// color: blue;
|
opacity: 0.8;
|
box-shadow: inset 0px -2px 0px #002c66;
|
}
|
}
|
|
.draw-continer {
|
width: 100%;
|
height: calc(100% - 0.28rem);
|
}
|
|
.click-active-style {
|
background-color: #84ccf3;
|
}
|
}
|
.is-disabled {
|
cursor: not-allowed !important;
|
color: #cacfdb !important;
|
&:hover {
|
color: #cacfdb !important;
|
}
|
}
|
</style>
|
