|
|
@@ -0,0 +1,1107 @@
|
|
|
+<template>
|
|
|
+ <div class="CalligraphyMaster-cread">
|
|
|
+ <Header />
|
|
|
+ <div class="bg_main">
|
|
|
+ <div class="main">
|
|
|
+ <div class="main-top">
|
|
|
+ <div class="left">
|
|
|
+ <span>画布设置：</span>
|
|
|
+ <div>
|
|
|
+ <span>长度</span>
|
|
|
+ <el-input
|
|
|
+ :readonly="true"
|
|
|
+ v-model="form.heightText"
|
|
|
+ style="width: 60px"
|
|
|
+ ></el-input>
|
|
|
+ <div class="add_remove">
|
|
|
+ <img
|
|
|
+ @click="addCanvasWH('H')"
|
|
|
+ src="../../assets/teacherdev/sfds-canvas-add.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ @click="removeCanvasWH('H')"
|
|
|
+ src="../../assets/teacherdev/sfds-canvas-remove.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <img src="../../assets/teacherdev/sfds-canvas-line.png" alt="" />
|
|
|
+ <span>宽度</span>
|
|
|
+ <el-input
|
|
|
+ :readonly="true"
|
|
|
+ v-model="form.widthText"
|
|
|
+ style="width: 60px"
|
|
|
+ ></el-input>
|
|
|
+ <div class="add_remove">
|
|
|
+ <img
|
|
|
+ @click="addCanvasWH('W')"
|
|
|
+ src="../../assets/teacherdev/sfds-canvas-add.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ @click="removeCanvasWH('W')"
|
|
|
+ src="../../assets/teacherdev/sfds-canvas-remove.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span>背景颜色</span>
|
|
|
+ <el-color-picker v-model="form.bg_color"></el-color-picker>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <div>
|
|
|
+ <img src="../../assets/teacherdev/word-save.png" alt="" />
|
|
|
+ 保存
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <img src="../../assets/teacherdev/sfds-fb.png" alt="" />
|
|
|
+ 发布
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <img src="../../assets/teacherdev/word-download.png" alt="" />
|
|
|
+ 下载
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="operation"
|
|
|
+ v-if="changeType == 'text' || changeType == 'luminance'"
|
|
|
+ >
|
|
|
+ <template v-if="changeType == 'text'">
|
|
|
+ <div class="text-operation">
|
|
|
+ <div class="font_sele">
|
|
|
+ <div
|
|
|
+ class="font_sele_input"
|
|
|
+ @click="FontFamilySele = !FontFamilySele"
|
|
|
+ >
|
|
|
+ <span>{{ fontForm.fontFamily }}</span>
|
|
|
+ <img
|
|
|
+ src="../../assets/teacherdev/font-sele-down.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div v-show="FontFamilySele" class="fontFamily_list">
|
|
|
+ <div class="Boutque_font">
|
|
|
+ <span class="one">精品字体</span>
|
|
|
+ <span
|
|
|
+ v-for="(item, index) in BoutiqueFontList"
|
|
|
+ :key="index + 'BoutiqueFon'"
|
|
|
+ >{{ item }}</span
|
|
|
+ >
|
|
|
+ <span class="more">更多...</span>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="fontFamily_one"
|
|
|
+ v-for="(item, index) in fontList"
|
|
|
+ :key="index + 'font'"
|
|
|
+ :value="item.fontFamily"
|
|
|
+ >
|
|
|
+ <div class="use" v-if="item.RecentUse">
|
|
|
+ <span>最近使用</span>
|
|
|
+ </div>
|
|
|
+ <div class="fontFamily">{{ item.fontFamily }}</div>
|
|
|
+ <div class="content">
|
|
|
+ <span>{{ item.content }}</span>
|
|
|
+ <img
|
|
|
+ v-if="item.collect"
|
|
|
+ src="../../assets/teacherdev/font-collect-sele.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ v-else
|
|
|
+ src="../../assets/teacherdev/font-collect.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-select
|
|
|
+ v-model="fontForm.fontSize"
|
|
|
+ style="width: 60px; margin-left: 8px"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="(item, i) in fontSizeList"
|
|
|
+ :key="i + 'fontsize'"
|
|
|
+ :value="item.value"
|
|
|
+ :label="item.name"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-select
|
|
|
+ v-model="fontForm.percent"
|
|
|
+ style="width: 68px; height: 32px; margin-left: 8px"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="i in 100"
|
|
|
+ :key="i + 'fontsize'"
|
|
|
+ :value="i"
|
|
|
+ :label="i + '%'"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <div class="img_dv">
|
|
|
+ <img src="../../assets/teacherdev/font-add.png" alt="" />
|
|
|
+ <img src="../../assets/teacherdev/font-remove.png" alt="" />
|
|
|
+ <img src="../../assets/teacherdev/font-blod.png" alt="" />
|
|
|
+ <img src="../../assets/teacherdev/font-red.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <el-color-picker
|
|
|
+ v-model="fontForm.fontColor"
|
|
|
+ style="margin-left: 8px; width: 60px"
|
|
|
+ ></el-color-picker>
|
|
|
+ <div class="img_dv" style="margin-left: 8px">
|
|
|
+ <img src="../../assets/teacherdev/font-left.png" alt="" />
|
|
|
+ <img src="../../assets/teacherdev/font-center.png" alt="" />
|
|
|
+ <img src="../../assets/teacherdev/font-right.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div class="img_dv" style="margin-left: 8px">
|
|
|
+ <img
|
|
|
+ src="../../assets/teacherdev/font-line-left-right.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ src="../../assets/teacherdev/font-line-top-bottom.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="img_dv" style="margin-left: 8px">
|
|
|
+ <img src="../../assets/teacherdev/font-italic.png" alt="" />
|
|
|
+ <img src="../../assets/teacherdev/font-blod2.png" alt="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-else-if="changeType == 'luminance'">
|
|
|
+ <div class="luminance-operation">
|
|
|
+ <img
|
|
|
+ :style="{ filter: `brightness(${changeluminanceNumber()})` }"
|
|
|
+ src="../../assets/teacherdev/sun.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <div class="line-text">
|
|
|
+ <div class="DragLine">
|
|
|
+ <DragLine :min="-100" :max="100" v-model="luminanceNumber" />
|
|
|
+ </div>
|
|
|
+ <div class="text">
|
|
|
+ <span>-100</span>
|
|
|
+ <span>0</span>
|
|
|
+ <span>+100</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="canvas"
|
|
|
+ :style="{
|
|
|
+ marginTop:
|
|
|
+ changeType == 'text' || changeType == 'luminance' ? 0 : '32px',
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ id="imgCanvas"
|
|
|
+ ref="imgCanvas"
|
|
|
+ :style="{
|
|
|
+ width: form.width + 'px',
|
|
|
+ height: form.height + 'px',
|
|
|
+ background: form.bg_color,
|
|
|
+ }"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ <div class="bottom">
|
|
|
+ <div>
|
|
|
+ <img src="../../assets/teacherdev/sfds-tailoring.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <el-upload
|
|
|
+ :accept="'.png,.jpg'"
|
|
|
+ class="upload-demo"
|
|
|
+ :show-file-list="false"
|
|
|
+ :action="url"
|
|
|
+ :on-preview="handlePreview"
|
|
|
+ :on-remove="handleRemove"
|
|
|
+ :multiple="true"
|
|
|
+ :on-exceed="handleExceed"
|
|
|
+ :on-success="handleSuccess"
|
|
|
+ :file-list="fileList"
|
|
|
+ :before-remove="beforeRemove"
|
|
|
+ :limit="1"
|
|
|
+ :before-upload="handlebeforeUplaod"
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ <img src="../../assets/teacherdev/sfds-image.png" alt="" />
|
|
|
+ </div>
|
|
|
+ </el-upload>
|
|
|
+
|
|
|
+ <div @click="addText">
|
|
|
+ <img src="../../assets/teacherdev/sfds-text.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div @click="deleteImage">
|
|
|
+ <img src="../../assets/teacherdev/sfds-delete.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div @click="changeluminance">
|
|
|
+ <img src="../../assets/teacherdev/sfds-sun.png" alt="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
|
|
+//例如：import 《组件名称》from ‘《组件路径》';
|
|
|
+import Header from "@/components/Header";
|
|
|
+import DragLine from "@/components/DragLine";
|
|
|
+import { getToken, removeToken } from "@/utils/auth";
|
|
|
+import { WebFileDownload } from "@/api/api";
|
|
|
+
|
|
|
+import "tui-image-editor/dist/tui-image-editor.css";
|
|
|
+import "tui-color-picker/dist/tui-color-picker.css";
|
|
|
+import ImageEditor from "tui-image-editor";
|
|
|
+
|
|
|
+const locale_zh = {
|
|
|
+ ZoomIn: "放大",
|
|
|
+ ZoomOut: "缩小",
|
|
|
+ Hand: "手掌",
|
|
|
+ History: "历史",
|
|
|
+ Resize: "调整宽高",
|
|
|
+ Crop: "裁剪",
|
|
|
+ DeleteAll: "全部删除",
|
|
|
+ Delete: "删除",
|
|
|
+ Undo: "撤销",
|
|
|
+ Redo: "反撤销",
|
|
|
+ Reset: "重置",
|
|
|
+ Flip: "镜像",
|
|
|
+ Rotate: "旋转",
|
|
|
+ Draw: "画",
|
|
|
+ Shape: "形状标注",
|
|
|
+ Icon: "图标标注",
|
|
|
+ Text: "文字标注",
|
|
|
+ Mask: "遮罩",
|
|
|
+ Filter: "滤镜",
|
|
|
+ Bold: "加粗",
|
|
|
+ Italic: "斜体",
|
|
|
+ Underline: "下划线",
|
|
|
+ Left: "左对齐",
|
|
|
+ Center: "居中",
|
|
|
+ Right: "右对齐",
|
|
|
+ Color: "颜色",
|
|
|
+ "Text size": "字体大小",
|
|
|
+ Custom: "自定义",
|
|
|
+ Square: "正方形",
|
|
|
+ Apply: "应用",
|
|
|
+ Cancel: "取消",
|
|
|
+ "Flip X": "X 轴",
|
|
|
+ "Flip Y": "Y 轴",
|
|
|
+ Range: "区间",
|
|
|
+ Stroke: "描边",
|
|
|
+ Fill: "填充",
|
|
|
+ Circle: "圆",
|
|
|
+ Triangle: "三角",
|
|
|
+ Rectangle: "矩形",
|
|
|
+ Free: "曲线",
|
|
|
+ Straight: "直线",
|
|
|
+ Arrow: "箭头",
|
|
|
+ "Arrow-2": "箭头2",
|
|
|
+ "Arrow-3": "箭头3",
|
|
|
+ "Star-1": "星星1",
|
|
|
+ "Star-2": "星星2",
|
|
|
+ Polygon: "多边形",
|
|
|
+ Location: "定位",
|
|
|
+ Heart: "心形",
|
|
|
+ Bubble: "气泡",
|
|
|
+ "Custom icon": "自定义图标",
|
|
|
+ "Load Mask Image": "加载蒙层图片",
|
|
|
+ Grayscale: "灰度",
|
|
|
+ Blur: "模糊",
|
|
|
+ Sharpen: "锐化",
|
|
|
+ Emboss: "浮雕",
|
|
|
+ "Remove White": "除去白色",
|
|
|
+ Distance: "距离",
|
|
|
+ Brightness: "亮度",
|
|
|
+ Noise: "噪音",
|
|
|
+ "Color Filter": "彩色滤镜",
|
|
|
+ Sepia: "棕色",
|
|
|
+ Sepia2: "棕色2",
|
|
|
+ Invert: "负片",
|
|
|
+ Pixelate: "像素化",
|
|
|
+ Threshold: "阈值",
|
|
|
+ Tint: "色调",
|
|
|
+ Multiply: "正片叠底",
|
|
|
+ Blend: "混合色",
|
|
|
+ Width: "宽度",
|
|
|
+ Height: "高度",
|
|
|
+ "Lock Aspect Ratio": "锁定宽高比例",
|
|
|
+};
|
|
|
+
|
|
|
+const customTheme = {
|
|
|
+ "common.bi.image": "", // 左上角logo图片
|
|
|
+ "common.bisize.width": "0px",
|
|
|
+ "common.bisize.height": "0px",
|
|
|
+ "common.backgroundImage": "none",
|
|
|
+ "common.backgroundColor": "#f3f4f6",
|
|
|
+ "common.border": "1px solid #333",
|
|
|
+
|
|
|
+ // header
|
|
|
+ "header.backgroundImage": "none",
|
|
|
+ "header.backgroundColor": "#f3f4f6",
|
|
|
+ "header.border": "0px",
|
|
|
+
|
|
|
+ // load button
|
|
|
+ "loadButton.backgroundColor": "#fff",
|
|
|
+ "loadButton.border": "1px solid #ddd",
|
|
|
+ "loadButton.color": "#222",
|
|
|
+ "loadButton.fontFamily": "NotoSans, sans-serif",
|
|
|
+ "loadButton.fontSize": "12px",
|
|
|
+ "loadButton.display": "none", // 隐藏
|
|
|
+
|
|
|
+ // download button
|
|
|
+ "downloadButton.backgroundColor": "#fdba3b",
|
|
|
+ "downloadButton.border": "1px solid #fdba3b",
|
|
|
+ "downloadButton.color": "#fff",
|
|
|
+ "downloadButton.fontFamily": "NotoSans, sans-serif",
|
|
|
+ "downloadButton.fontSize": "12px",
|
|
|
+ "downloadButton.display": "none", // 隐藏
|
|
|
+
|
|
|
+ // icons default
|
|
|
+ "menu.normalIcon.color": "#8a8a8a",
|
|
|
+ "menu.activeIcon.color": "#555555",
|
|
|
+ "menu.disabledIcon.color": "#ccc",
|
|
|
+ "menu.hoverIcon.color": "#e9e9e9",
|
|
|
+ "submenu.normalIcon.color": "#8a8a8a",
|
|
|
+ "submenu.activeIcon.color": "#e9e9e9",
|
|
|
+
|
|
|
+ "menu.iconSize.width": "24px",
|
|
|
+ "menu.iconSize.height": "24px",
|
|
|
+ "submenu.iconSize.width": "32px",
|
|
|
+ "submenu.iconSize.height": "32px",
|
|
|
+
|
|
|
+ // submenu primary color
|
|
|
+ "submenu.backgroundColor": "#1e1e1e",
|
|
|
+ "submenu.partition.color": "#858585",
|
|
|
+
|
|
|
+ // submenu labels
|
|
|
+ "submenu.normalLabel.color": "#858585",
|
|
|
+ "submenu.normalLabel.fontWeight": "lighter",
|
|
|
+ "submenu.activeLabel.color": "#fff",
|
|
|
+ "submenu.activeLabel.fontWeight": "lighter",
|
|
|
+
|
|
|
+ // checkbox style
|
|
|
+ "checkbox.border": "1px solid #ccc",
|
|
|
+ "checkbox.backgroundColor": "#fff",
|
|
|
+
|
|
|
+ // rango style
|
|
|
+ "range.pointer.color": "#fff",
|
|
|
+ "range.bar.color": "#666",
|
|
|
+ "range.subbar.color": "#d1d1d1",
|
|
|
+
|
|
|
+ "range.disabledPointer.color": "#414141",
|
|
|
+ "range.disabledBar.color": "#282828",
|
|
|
+ "range.disabledSubbar.color": "#414141",
|
|
|
+
|
|
|
+ "range.value.color": "#fff",
|
|
|
+ "range.value.fontWeight": "lighter",
|
|
|
+ "range.value.fontSize": "11px",
|
|
|
+ "range.value.border": "1px solid #353535",
|
|
|
+ "range.value.backgroundColor": "#151515",
|
|
|
+ "range.title.color": "#fff",
|
|
|
+ "range.title.fontWeight": "lighter",
|
|
|
+
|
|
|
+ // colorpicker style
|
|
|
+ "colorpicker.button.border": "1px solid #1e1e1e",
|
|
|
+ "colorpicker.title.color": "#fff",
|
|
|
+};
|
|
|
+
|
|
|
+export default {
|
|
|
+ //import引入的组件需要注入到对象中才能使用
|
|
|
+ components: {
|
|
|
+ Header,
|
|
|
+ DragLine,
|
|
|
+ },
|
|
|
+ props: {},
|
|
|
+ data() {
|
|
|
+ //这里存放数据
|
|
|
+ return {
|
|
|
+ form: {
|
|
|
+ width: 500,
|
|
|
+ widthText: "500mm",
|
|
|
+ height: 500,
|
|
|
+ heightText: "500mm",
|
|
|
+ bg_color: "#FF3F3F",
|
|
|
+ },
|
|
|
+ BoutiqueFontList: [
|
|
|
+ "水墨字体",
|
|
|
+ "古风字体",
|
|
|
+ "中国风字体",
|
|
|
+ "书协专家字体",
|
|
|
+ "电影海报字体",
|
|
|
+ "国潮字体",
|
|
|
+ ],
|
|
|
+ fontSizeList: [
|
|
|
+ {
|
|
|
+ name: "5号",
|
|
|
+ value: 5,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ fontList: [
|
|
|
+ {
|
|
|
+ fontFamily: "方正颜真卿楷书",
|
|
|
+ content: "忽如一夜春风来",
|
|
|
+ collect: true,
|
|
|
+ RecentUse: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ fontFamily: "方正颜真卿楷书",
|
|
|
+ content: "忽如一夜春风来",
|
|
|
+ collect: false,
|
|
|
+ RecentUse: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ fontFamily: "方正颜真卿楷书",
|
|
|
+ content: "忽如一夜春风来",
|
|
|
+ collect: true,
|
|
|
+ RecentUse: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ fontFamily: "方正颜真卿楷书",
|
|
|
+ content: "忽如一夜春风来",
|
|
|
+ collect: false,
|
|
|
+ RecentUse: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ fontFamily: "方正颜真卿楷书",
|
|
|
+ content: "忽如一夜春风来",
|
|
|
+ collect: true,
|
|
|
+ RecentUse: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ fontFamily: "方正颜真卿楷书",
|
|
|
+ content: "忽如一夜春风来",
|
|
|
+ collect: false,
|
|
|
+ RecentUse: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ fontFamily: "方正颜真卿楷书",
|
|
|
+ content: "忽如一夜春风来",
|
|
|
+ collect: true,
|
|
|
+ RecentUse: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ fontFamily: "方正颜真卿楷书",
|
|
|
+ content: "忽如一夜春风来",
|
|
|
+ collect: false,
|
|
|
+ RecentUse: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ fontFamily: "方正颜真卿楷书",
|
|
|
+ content: "忽如一夜春风来",
|
|
|
+ collect: true,
|
|
|
+ RecentUse: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ fontFamily: "方正颜真卿楷书",
|
|
|
+ content: "忽如一夜春风来",
|
|
|
+ collect: false,
|
|
|
+ RecentUse: false,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ luminanceNumber: 0,
|
|
|
+ changeType: "",
|
|
|
+ fontForm: {
|
|
|
+ fontFamily: "方正颜真卿楷书",
|
|
|
+ fontSize: 5,
|
|
|
+ percent: 100,
|
|
|
+ fontColor: "#FFFFFF",
|
|
|
+ },
|
|
|
+ FontFamilySele: false,
|
|
|
+ loading: false,
|
|
|
+ fileList: [],
|
|
|
+ imgCtx: null,
|
|
|
+ TUI_selectedItem: null,
|
|
|
+ TUI_selectedFont: "",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ //计算属性 类似于data概念
|
|
|
+ computed: {
|
|
|
+ url() {
|
|
|
+ let userInfor = JSON.parse(getToken());
|
|
|
+ let UserCode = "",
|
|
|
+ UserType = "",
|
|
|
+ SessionID = "";
|
|
|
+ if (userInfor) {
|
|
|
+ UserCode = userInfor.user_code;
|
|
|
+ UserType = userInfor.user_type;
|
|
|
+ SessionID = userInfor.session_id;
|
|
|
+ }
|
|
|
+ return (
|
|
|
+ process.env.VUE_APP_BASE_API +
|
|
|
+ `/GCLSFileServer/WebFileUpload?UserCode=${UserCode}&UserType=${UserType}&SessionID=${SessionID}&SecurityLevel=Mid"`
|
|
|
+ );
|
|
|
+ },
|
|
|
+ },
|
|
|
+ //监控data中数据变化
|
|
|
+ watch: {},
|
|
|
+ //方法集合
|
|
|
+ methods: {
|
|
|
+ // 增加画布宽或高
|
|
|
+ addCanvasWH(type) {
|
|
|
+ if (type == "W") {
|
|
|
+ if (this.form.width == 500) {
|
|
|
+ this.$message.warning("已达到上限");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.form.width++;
|
|
|
+ this.form.widthText = this.form.width + "mm";
|
|
|
+ } else {
|
|
|
+ if (this.form.height == 500) {
|
|
|
+ this.$message.warning("已达到上限");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.form.height++;
|
|
|
+ this.form.heightText = this.form.height + "mm";
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 减少画布宽或高
|
|
|
+ removeCanvasWH(type) {
|
|
|
+ if (type == "W") {
|
|
|
+ if (this.form.width == 0) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.form.width--;
|
|
|
+ this.form.widthText = this.form.width + "mm";
|
|
|
+ } else {
|
|
|
+ if (this.form.height == 0) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.form.height--;
|
|
|
+ this.form.heightText = this.form.height + "mm";
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 添加文字
|
|
|
+ addText() {
|
|
|
+ this.changeType = "text";
|
|
|
+ },
|
|
|
+ // 修改亮度
|
|
|
+ changeluminance() {
|
|
|
+ this.changeType = "luminance";
|
|
|
+ },
|
|
|
+ // 计算css所需亮度
|
|
|
+ changeluminanceNumber() {
|
|
|
+ if (this.luminanceNumber == 0) {
|
|
|
+ return 1;
|
|
|
+ }
|
|
|
+ if (this.luminanceNumber > 0) {
|
|
|
+ return 1 + (this.luminanceNumber / 100) * 2;
|
|
|
+ } else {
|
|
|
+ return Math.abs(Math.abs(this.luminanceNumber) - 100) / 100;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ initCanvasImage() {
|
|
|
+ this.loading = this.$loading({
|
|
|
+ lock: true,
|
|
|
+ text: "Loading",
|
|
|
+ spinner: "el-icon-loading",
|
|
|
+ background: "rgba(0, 0, 0, 0.7)",
|
|
|
+ });
|
|
|
+ // 直接使用跨域 请求文件流转url 再使用
|
|
|
+ WebFileDownload({
|
|
|
+ FileID: this.fileList[0].file_id,
|
|
|
+ }).then((res) => {
|
|
|
+ const objectUrl = window.URL.createObjectURL(res);
|
|
|
+ this.instance = new ImageEditor(document.querySelector("#imgCanvas"), {
|
|
|
+ includeUI: {
|
|
|
+ loadImage: {
|
|
|
+ path: objectUrl,
|
|
|
+ name: "image",
|
|
|
+ },
|
|
|
+ menu: [
|
|
|
+ "resize",
|
|
|
+ "crop",
|
|
|
+ "rotate",
|
|
|
+ "draw",
|
|
|
+ "shape",
|
|
|
+ "icon",
|
|
|
+ "text",
|
|
|
+ "filter",
|
|
|
+ ], // 底部菜单按钮列表 隐藏镜像flip和遮罩mask
|
|
|
+ initMenu: "draw", // 默认打开的菜单项
|
|
|
+ menuBarPosition: "bottom", // 菜单所在的位置
|
|
|
+ locale: locale_zh, // 本地化语言为中文
|
|
|
+ theme: customTheme, // 自定义样式
|
|
|
+ },
|
|
|
+ cssMaxWidth: this.form.width, // canvas 最大宽度
|
|
|
+ cssMaxHeight: this.form.heigt, // canvas 最大高度
|
|
|
+ });
|
|
|
+ let fontArray = [
|
|
|
+ "Arial",
|
|
|
+ "Arial Black",
|
|
|
+ "Caveat",
|
|
|
+ "Comic Sans MS",
|
|
|
+ "Courier New",
|
|
|
+ "Georgia1",
|
|
|
+ "Impact",
|
|
|
+ "Lobster Two",
|
|
|
+ "Lucida Console",
|
|
|
+ "Luckiest Guy",
|
|
|
+ "Open Sans",
|
|
|
+ "Pacifico",
|
|
|
+ "Palatino Linotype",
|
|
|
+ "Press Start 2P",
|
|
|
+ "Roboto",
|
|
|
+ "Tahoma",
|
|
|
+ "Tangerine",
|
|
|
+ "Times New Roman",
|
|
|
+ "Tourney",
|
|
|
+ "Ultra",
|
|
|
+ "Verdana",
|
|
|
+ "Symbol",
|
|
|
+ "Webdings",
|
|
|
+ "Wingdings",
|
|
|
+ ];
|
|
|
+
|
|
|
+ let fontSelectHTML =
|
|
|
+ '<select #fontselect class="form-select font-selector">';
|
|
|
+ for (let i = 0; i < fontArray.length; i++) {
|
|
|
+ let selected = "";
|
|
|
+ if (i == 0) {
|
|
|
+ selected = "selected";
|
|
|
+ }
|
|
|
+ fontSelectHTML +=
|
|
|
+ '<option style="font-family:' +
|
|
|
+ fontArray[i] +
|
|
|
+ ' !important;" value="' +
|
|
|
+ fontArray[i] +
|
|
|
+ '" ' +
|
|
|
+ selected +
|
|
|
+ ">" +
|
|
|
+ fontArray[i] +
|
|
|
+ "</option>";
|
|
|
+ }
|
|
|
+ fontSelectHTML += "</select>";
|
|
|
+
|
|
|
+ let textMenuAlign = document.querySelector(
|
|
|
+ ".tui-image-editor-menu-text .tie-text-align-button"
|
|
|
+ );
|
|
|
+ textMenuAlign.insertAdjacentHTML("afterbegin", fontSelectHTML);
|
|
|
+
|
|
|
+ document
|
|
|
+ .querySelector(".font-selector")
|
|
|
+ .addEventListener("change", () =>
|
|
|
+ this.TUI_updateFontOnText($(".font-selector option:selected").val())
|
|
|
+ );
|
|
|
+ this.instance.on("objectActivated", (props) => {
|
|
|
+ this.TUI_selectedItem = props;
|
|
|
+ this.TUI_updateFontSelected(props);
|
|
|
+ console.log("TUI_selectedItem", props);
|
|
|
+ });
|
|
|
+
|
|
|
+ this.loading.close();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ TUI_updateFontOnText(font) {
|
|
|
+ console.log("TUI_updateFontOnText", font, this.TUI_selectedItem.id);
|
|
|
+
|
|
|
+ if (font) {
|
|
|
+ this.TUI_selectedFont = font;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (font && this.TUI_selectedItem) {
|
|
|
+ this.instance.changeTextStyle(this.TUI_selectedItem.id, {
|
|
|
+ fontFamily: font,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ TUI_updateFontSelected(layer) {
|
|
|
+ console.log("TUI_updateFontSelected", layer);
|
|
|
+
|
|
|
+ if (layer.fontFamily) {
|
|
|
+ document.querySelector(".font-selector").value = layer.fontFamily;
|
|
|
+ this.TUI_selectedFont = layer.fontFamily;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 删除上传的图片
|
|
|
+ deleteImage() {
|
|
|
+ this.fileList = [];
|
|
|
+ },
|
|
|
+ handlebeforeUplaod(file) {
|
|
|
+ if (file.size > 20 * 1024 * 1024) {
|
|
|
+ this.$message.warning("上传文件大小不能超过20M");
|
|
|
+ return false; //必须返回false
|
|
|
+ }
|
|
|
+ this.loading = this.$loading({
|
|
|
+ lock: true,
|
|
|
+ text: "Loading",
|
|
|
+ spinner: "el-icon-loading",
|
|
|
+ background: "rgba(0, 0, 0, 0.7)",
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleSuccess(response, file, fileList) {
|
|
|
+ if (response.status == 1) {
|
|
|
+ this.fileList = response.file_info_list;
|
|
|
+ this.loading.close();
|
|
|
+ this.initCanvasImage();
|
|
|
+ } else if (response.status == -1) {
|
|
|
+ this.loading.close();
|
|
|
+ removeToken();
|
|
|
+ this.$message.warning(response.error);
|
|
|
+ this.$router.push("/login");
|
|
|
+ } else {
|
|
|
+ this.loading.close();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleRemove(file, fileList) {},
|
|
|
+ handlePreview(file) {},
|
|
|
+ handleExceed(files, fileList) {
|
|
|
+ this.$message.warning(
|
|
|
+ `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
|
|
|
+ files.length + fileList.length
|
|
|
+ } 个文件`
|
|
|
+ );
|
|
|
+ },
|
|
|
+ beforeRemove(file, filleList) {},
|
|
|
+ },
|
|
|
+ //生命周期 - 创建完成（可以访问当前this实例）
|
|
|
+ created() {},
|
|
|
+ //生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
+ mounted() {},
|
|
|
+ //生命周期-创建之前
|
|
|
+ beforeCreated() {},
|
|
|
+ //生命周期-挂载之前
|
|
|
+ beforeMount() {},
|
|
|
+ //生命周期-更新之前
|
|
|
+ beforUpdate() {},
|
|
|
+ //生命周期-更新之后
|
|
|
+ updated() {},
|
|
|
+ //生命周期-销毁之前
|
|
|
+ beforeDestory() {},
|
|
|
+ //生命周期-销毁完成
|
|
|
+ destoryed() {},
|
|
|
+ //如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
+ activated() {},
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+/* @import url(); 引入css类 */
|
|
|
+.CalligraphyMaster-cread {
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+ .bg_main {
|
|
|
+ background: #f7f7f7;
|
|
|
+ min-height: 100%;
|
|
|
+ padding-top: 24px;
|
|
|
+ padding-bottom: 70px;
|
|
|
+ .main {
|
|
|
+ width: 1168px;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 16px;
|
|
|
+ background: #ffffff;
|
|
|
+ .main-top {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .left {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #000000;
|
|
|
+ > div {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-right: 8px;
|
|
|
+ > img {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+ .add_remove {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ align-items: center;
|
|
|
+ width: 10px;
|
|
|
+ margin-left: 8px;
|
|
|
+ img {
|
|
|
+ width: 10px;
|
|
|
+ height: 10px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ > :nth-child(1) {
|
|
|
+ margin-bottom: 1px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ display: flex;
|
|
|
+ div {
|
|
|
+ margin-left: 16px;
|
|
|
+ width: 96px;
|
|
|
+ height: 40px;
|
|
|
+ background: #ffffff;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.08);
|
|
|
+ border-radius: 4px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ cursor: pointer;
|
|
|
+ img {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .operation {
|
|
|
+ margin-top: 33px;
|
|
|
+ }
|
|
|
+ .text-operation {
|
|
|
+ height: 48px;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.08);
|
|
|
+ border-radius: 8px 8px 0px 0px;
|
|
|
+ border-bottom: none;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 16px;
|
|
|
+ .font_sele {
|
|
|
+ position: relative;
|
|
|
+ .font_sele_input {
|
|
|
+ width: 193px;
|
|
|
+ height: 32px;
|
|
|
+ padding: 0 6px;
|
|
|
+ background: #ffffff;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.08);
|
|
|
+ border-radius: 4px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ cursor: pointer;
|
|
|
+ > span {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 20px;
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+ > img {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .fontFamily_list {
|
|
|
+ position: absolute;
|
|
|
+ top: 39px;
|
|
|
+ left: 0;
|
|
|
+ width: 468px;
|
|
|
+ background: #ffffff;
|
|
|
+ border-width: 0px 1px 1px 1px;
|
|
|
+ border-style: solid;
|
|
|
+ border-color: #dbdbdb;
|
|
|
+ height: 520px;
|
|
|
+ overflow: auto;
|
|
|
+ .fontFamily_one {
|
|
|
+ padding: 12px 24px 16px 32px;
|
|
|
+ border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
|
|
+ position: relative;
|
|
|
+ .use {
|
|
|
+ width: 80px;
|
|
|
+ height: 80px;
|
|
|
+ background: url("../../assets/teacherdev/font-use.png");
|
|
|
+ background-size: cover;
|
|
|
+ position: absolute;
|
|
|
+ left: -20px;
|
|
|
+ top: -20px;
|
|
|
+ -webkit-transform: scale(0.5);
|
|
|
+
|
|
|
+ span {
|
|
|
+ color: #ffffff;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 16px;
|
|
|
+ position: absolute;
|
|
|
+ transform: translateX(-3px) translateY(20px) rotate(-45deg);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .fontFamily {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 20px;
|
|
|
+ color: rgba(0, 0, 0, 0.5);
|
|
|
+ }
|
|
|
+ .content {
|
|
|
+ margin-top: 8px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ span {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 32px;
|
|
|
+ line-height: 150%;
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .Boutque_font {
|
|
|
+ padding: 16px 12px 0 12px;
|
|
|
+ background: #f0f0f0;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 20px;
|
|
|
+ color: rgba(0, 0, 0, 0.6);
|
|
|
+ cursor: default;
|
|
|
+ span {
|
|
|
+ display: inline-block;
|
|
|
+ margin: 0 12px 12px 12px;
|
|
|
+ }
|
|
|
+ .one {
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+ .more {
|
|
|
+ color: rgba(0, 0, 0, 0.35);
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .img_dv {
|
|
|
+ img {
|
|
|
+ width: 26px;
|
|
|
+ height: 26px;
|
|
|
+ cursor: pointer;
|
|
|
+ margin-left: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .luminance-operation {
|
|
|
+ width: 440px;
|
|
|
+ margin: 0 auto;
|
|
|
+ display: flex;
|
|
|
+ > img {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ }
|
|
|
+ .line-text {
|
|
|
+ margin-left: 17px;
|
|
|
+ .DragLine {
|
|
|
+ margin-top: 7px;
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ margin-top: 8px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 20px;
|
|
|
+ color: #919c9e;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .canvas {
|
|
|
+ height: 500px;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .bottom {
|
|
|
+ margin-top: 40px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ div {
|
|
|
+ width: 48px;
|
|
|
+ height: 40px;
|
|
|
+ background: #ffffff;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.08);
|
|
|
+ border-radius: 4px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ cursor: pointer;
|
|
|
+ margin: 0 16px;
|
|
|
+ img {
|
|
|
+ width: 32px;
|
|
|
+ height: 32px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="scss">
|
|
|
+.CalligraphyMaster-cread {
|
|
|
+ .main-top {
|
|
|
+ .left {
|
|
|
+ .el-input__inner {
|
|
|
+ padding: 0 5px;
|
|
|
+ }
|
|
|
+ .el-color-picker__color {
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ .el-icon-close:before {
|
|
|
+ content: "";
|
|
|
+ }
|
|
|
+ .el-icon-arrow-down:before {
|
|
|
+ content: "";
|
|
|
+ }
|
|
|
+ .el-color-picker__color-inner {
|
|
|
+ position: absolute;
|
|
|
+ left: 3px;
|
|
|
+ top: 3px;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-operation {
|
|
|
+ .el-color-picker__trigger {
|
|
|
+ width: 60px;
|
|
|
+ height: 32px;
|
|
|
+ }
|
|
|
+ .el-color-picker__empty,
|
|
|
+ .el-color-picker__icon {
|
|
|
+ left: 72%;
|
|
|
+ }
|
|
|
+ .el-color-picker__color {
|
|
|
+ width: 28px;
|
|
|
+ }
|
|
|
+ .el-icon-close:before,
|
|
|
+ .el-icon-arrow-down:before {
|
|
|
+ color: gray;
|
|
|
+ }
|
|
|
+ .el-color-picker__color-inner {
|
|
|
+ position: absolute;
|
|
|
+ left: -1px;
|
|
|
+ top: -1px;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.08);
|
|
|
+ border-radius: 2px;
|
|
|
+ }
|
|
|
+ .el-input__inner {
|
|
|
+ padding: 0 8px;
|
|
|
+ }
|
|
|
+ .el-input__inner,
|
|
|
+ .el-input__suffix {
|
|
|
+ height: 32px;
|
|
|
+ }
|
|
|
+ .el-input__icon {
|
|
|
+ line-height: 32px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
gcj