|
|
@@ -1,268 +1,19 @@
|
|
|
<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 class="drawing-container">
|
|
|
+ <div id="tui-image-editor"></div>
|
|
|
+ <el-button class="save" type="primary" size="small" @click="save"
|
|
|
+ >保存</el-button
|
|
|
+ >
|
|
|
</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: "缩小",
|
|
|
@@ -343,7 +94,7 @@ const customTheme = {
|
|
|
"common.bisize.width": "0px",
|
|
|
"common.bisize.height": "0px",
|
|
|
"common.backgroundImage": "none",
|
|
|
- "common.backgroundColor": "#f3f4f6",
|
|
|
+ "common.backgroundColor": "#fff",
|
|
|
"common.border": "1px solid #333",
|
|
|
|
|
|
// header
|
|
|
@@ -415,210 +166,30 @@ const customTheme = {
|
|
|
"colorpicker.button.border": "1px solid #1e1e1e",
|
|
|
"colorpicker.title.color": "#fff",
|
|
|
};
|
|
|
-
|
|
|
export default {
|
|
|
- //import引入的组件需要注入到对象中才能使用
|
|
|
- components: {
|
|
|
- Header,
|
|
|
- DragLine,
|
|
|
- },
|
|
|
- props: {},
|
|
|
+ components: { Header },
|
|
|
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,
|
|
|
+ instance: 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"`
|
|
|
- );
|
|
|
- },
|
|
|
+ mounted() {
|
|
|
+ this.init();
|
|
|
},
|
|
|
- //监控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"), {
|
|
|
+ init() {
|
|
|
+ this.instance = new ImageEditor(
|
|
|
+ document.querySelector("#tui-image-editor"),
|
|
|
+ {
|
|
|
includeUI: {
|
|
|
loadImage: {
|
|
|
- path: objectUrl,
|
|
|
+ path: "https://img2.baidu.com/it/u=1395980100,2999837177&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=675",
|
|
|
name: "image",
|
|
|
},
|
|
|
menu: [
|
|
|
+ "mask",
|
|
|
"resize",
|
|
|
"crop",
|
|
|
"rotate",
|
|
|
@@ -633,73 +204,76 @@ export default {
|
|
|
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>";
|
|
|
+ cssMaxWidth: 500, // canvas 最大宽度
|
|
|
+ cssMaxHeight: 500, // canvas 最大高度
|
|
|
}
|
|
|
- fontSelectHTML += "</select>";
|
|
|
+ );
|
|
|
+ document.getElementsByClassName("tui-image-editor-main")[0].style.top =
|
|
|
+ "45px"; // 调整图片显示位置
|
|
|
+ document.getElementsByClassName(
|
|
|
+ "tie-btn-reset tui-image-editor-item help"
|
|
|
+ )[0].style.display = "none"; // 隐藏顶部重置按钮
|
|
|
+ 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 textMenuAlign = document.querySelector(
|
|
|
- ".tui-image-editor-menu-text .tie-text-align-button"
|
|
|
- );
|
|
|
- textMenuAlign.insertAdjacentHTML("afterbegin", fontSelectHTML);
|
|
|
+ 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>";
|
|
|
|
|
|
- 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);
|
|
|
- });
|
|
|
+ let textMenuAlign = document.querySelector(
|
|
|
+ ".tui-image-editor-menu-text .tie-text-align-button"
|
|
|
+ );
|
|
|
+ textMenuAlign.insertAdjacentHTML("afterbegin", fontSelectHTML);
|
|
|
|
|
|
- this.loading.close();
|
|
|
+ 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);
|
|
|
});
|
|
|
},
|
|
|
TUI_updateFontOnText(font) {
|
|
|
@@ -723,385 +297,31 @@ export default {
|
|
|
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();
|
|
|
+ // 保存图片，并上传
|
|
|
+ save() {
|
|
|
+ const base64String = this.instance.toDataURL(); // base64 文件
|
|
|
+ const data = window.atob(base64String.split(",")[1]);
|
|
|
+ const ia = new Uint8Array(data.length);
|
|
|
+ for (let i = 0; i < data.length; i++) {
|
|
|
+ ia[i] = data.charCodeAt(i);
|
|
|
}
|
|
|
+ const blob = new Blob([ia], { type: "image/png" }); // blob 文件
|
|
|
+ const form = new FormData();
|
|
|
+ form.append("image", blob);
|
|
|
+ // upload file
|
|
|
},
|
|
|
- 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 scoped>
|
|
|
+.drawing-container {
|
|
|
+ height: 795px;
|
|
|
+ position: relative;
|
|
|
}
|
|
|
-</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;
|
|
|
- }
|
|
|
- }
|
|
|
+.save {
|
|
|
+ position: absolute;
|
|
|
+ right: 50px;
|
|
|
+ top: 15px;
|
|
|
}
|
|
|
</style>
|
gcj