|
|
@@ -17,7 +17,7 @@
|
|
|
" />
|
|
|
</div>
|
|
|
<div :class="['tools', 'settings', isExpand ? '' : 'noExpand']">
|
|
|
- <div class="tool_item" v-for="(item, index) in settings" :key="item.icon">
|
|
|
+ <div class="tool_item" v-for="(item, index) in settingsWithLang" :key="item.icon">
|
|
|
<button v-if="index == 0">
|
|
|
<svg class="icon" aria-hidden="true" :style="'color:' + defaultColor">
|
|
|
<use :xlink:href="item.icon" />
|
|
|
@@ -39,7 +39,7 @@
|
|
|
<span>{{ item.name }}</span>
|
|
|
</button>
|
|
|
</div>
|
|
|
- <div class="tool_item" v-for="item in btnsConfig" :key="item.icon">
|
|
|
+ <div class="tool_item" v-for="item in btnsWithLang" :key="item.icon">
|
|
|
<button @click.stop="item.fun" v-if="item.name == lang.ssPrevious" :disabled="prevDis"
|
|
|
:style="prevDis ? 'cursor:not-allowed' : ''">
|
|
|
<svg class="icon" aria-hidden="true">
|
|
|
@@ -78,7 +78,7 @@
|
|
|
<div :class="[
|
|
|
'tool_item',
|
|
|
activeTool == item.toolType ? 'activeTool' : '',
|
|
|
- ]" v-for="item in tools" :key="item.toolType" @click.stop="handleChangeToolType(item.toolType)">
|
|
|
+ ]" v-for="item in toolsWithLang" :key="item.toolType" @click.stop="handleChangeToolType(item.toolType)">
|
|
|
<svg class="icon" aria-hidden="true">
|
|
|
<use :xlink:href="item.icon" />
|
|
|
</svg>
|
|
|
@@ -95,10 +95,7 @@
|
|
|
import cursors from "./cursor";
|
|
|
import "../../../assets/drawIcon/iconfont";
|
|
|
import bgA from "./img";
|
|
|
-import { myMixin } from "@/mixins/mixin.js"
|
|
|
-
|
|
|
export default {
|
|
|
- mixins: [myMixin],
|
|
|
name: "imgDraw",
|
|
|
props: {
|
|
|
drawShow: {
|
|
|
@@ -118,37 +115,66 @@ export default {
|
|
|
defaultColor: "#333333",
|
|
|
cursor: `url('${cursors.pen}'),auto`,
|
|
|
slide: 1,
|
|
|
- settings: [
|
|
|
+ activeTool: 1,
|
|
|
+ canvas_front: null,
|
|
|
+ canvas_back: null,
|
|
|
+ canvas_base: null,
|
|
|
+ ctx_base: null,
|
|
|
+ ctx_front: null,
|
|
|
+ ctx_back: null,
|
|
|
+ currentImg: {
|
|
|
+ url: "",
|
|
|
+ width: "",
|
|
|
+ height: "",
|
|
|
+ scale: 1,
|
|
|
+ index: 0,
|
|
|
+ },
|
|
|
+ isExpand: 1,
|
|
|
+ showTools: 1,
|
|
|
+ canDraw: false,
|
|
|
+ text: "",
|
|
|
+ canvasStore: [""],
|
|
|
+ prevDis: true,
|
|
|
+ nextDis: true,
|
|
|
+ baseMap: "",
|
|
|
+ tl: 0,
|
|
|
+ tt: 0,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ settingsWithLang() {
|
|
|
+ return [
|
|
|
{
|
|
|
icon: "#icon-youqitong_huaban1",
|
|
|
- name: this.lang ? this.lang.ssColor : "颜色",
|
|
|
+ name: this.lang.ssColor,
|
|
|
fun: "",
|
|
|
},
|
|
|
{
|
|
|
icon: "#icon-huabi_huaban1",
|
|
|
- name: this.lang ? this.lang.ssThickness : "粗细",
|
|
|
+ name: this.lang.ssThickness,
|
|
|
fun: "",
|
|
|
},
|
|
|
{
|
|
|
icon: "#icon-fangda_huaban1",
|
|
|
- name: this.lang ? this.lang.ssZoomIn : "放大",
|
|
|
+ name: this.lang.ssZoomIn,
|
|
|
fun: () => {
|
|
|
return this.handleBeLarge();
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
icon: "#icon-suoxiao_huaban1",
|
|
|
- name: this.lang ? this.lang.ssZoomOut : "缩小",
|
|
|
+ name: this.lang.ssZoomOut,
|
|
|
fun: () => {
|
|
|
return this.handleBeSmall();
|
|
|
},
|
|
|
},
|
|
|
- ],
|
|
|
- activeTool: 1,
|
|
|
- tools: [
|
|
|
+ ];
|
|
|
+ },
|
|
|
+ toolsWithLang() {
|
|
|
+ return [
|
|
|
{
|
|
|
icon: "#icon-huabi_huaban1",
|
|
|
- name: this.lang ? this.lang.ssBrush : "画笔",
|
|
|
+ name: this.lang.ssBrush,
|
|
|
toolType: 1,
|
|
|
},
|
|
|
// {
|
|
|
@@ -173,55 +199,30 @@ export default {
|
|
|
// },
|
|
|
{
|
|
|
icon: "#icon-wenzi_huaban1",
|
|
|
- name: this.lang ? this.lang.ssText : "文字",
|
|
|
+ name: this.lang.ssText,
|
|
|
toolType: 6,
|
|
|
},
|
|
|
- ],
|
|
|
- canvas_front: null,
|
|
|
- canvas_back: null,
|
|
|
- canvas_base: null,
|
|
|
- ctx_base: null,
|
|
|
- ctx_front: null,
|
|
|
- ctx_back: null,
|
|
|
- currentImg: {
|
|
|
- url: "",
|
|
|
- width: "",
|
|
|
- height: "",
|
|
|
- scale: 1,
|
|
|
- index: 0,
|
|
|
- },
|
|
|
- isExpand: 1,
|
|
|
- showTools: 1,
|
|
|
- canDraw: false,
|
|
|
- text: "",
|
|
|
- canvasStore: [""],
|
|
|
- prevDis: true,
|
|
|
- nextDis: true,
|
|
|
- baseMap: "",
|
|
|
- tl: 0,
|
|
|
- tt: 0,
|
|
|
- };
|
|
|
- },
|
|
|
- computed: {
|
|
|
- btnsConfig() {
|
|
|
+ ];
|
|
|
+ },
|
|
|
+ btnsWithLang() {
|
|
|
return [
|
|
|
{
|
|
|
icon: "#icon-chexiao",
|
|
|
- name: this.lang ? this.lang.ssPrevious : "上一步",
|
|
|
+ name: this.lang.ssPrevious,
|
|
|
fun: () => {
|
|
|
return this.handlePrev();
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
icon: "#icon-zhongzuo",
|
|
|
- name: this.lang ? this.lang.ssNext : "下一步",
|
|
|
+ name: this.lang.ssNext,
|
|
|
fun: () => {
|
|
|
return this.handleNext();
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
icon: "#icon-lajixiang_huaban1",
|
|
|
- name: this.lang ? this.lang.ssClear : "清除",
|
|
|
+ name: this.lang.ssClear,
|
|
|
fun: () => {
|
|
|
return this.handleClearCanvas();
|
|
|
},
|
|
|
@@ -229,7 +230,7 @@ export default {
|
|
|
{
|
|
|
// icon: "#icon-baocun",
|
|
|
icon: "",
|
|
|
- name: this.lang ? this.lang.ssClose : "关闭",
|
|
|
+ name: this.lang.ssClose,
|
|
|
fun: () => {
|
|
|
// return this.handleCanvas2Img();
|
|
|
// return (this.show = false);
|
|
|
@@ -238,7 +239,7 @@ export default {
|
|
|
},
|
|
|
{
|
|
|
icon: "",
|
|
|
- name: this.lang ? this.lang.ssSaveAnnotation : "保存批注",
|
|
|
+ name: this.lang.ssSaveAnnotation,
|
|
|
fun: () => {
|
|
|
return this.handleSave();
|
|
|
},
|
|
|
@@ -762,16 +763,16 @@ export default {
|
|
|
this.tools = [
|
|
|
{
|
|
|
icon: "#icon-zhixian_huaban1",
|
|
|
- name: this.lang ? this.lang.ssMove : "移动",
|
|
|
+ name: this.lang.ssMove,
|
|
|
toolType: 0,
|
|
|
}, {
|
|
|
icon: "#icon-huabi_huaban1",
|
|
|
- name: this.lang ? this.lang.ssBrush : "画笔",
|
|
|
+ name: this.lang.ssBrush,
|
|
|
toolType: 1,
|
|
|
},
|
|
|
{
|
|
|
icon: "#icon-wenzi_huaban1",
|
|
|
- name: this.lang ? this.lang.ssText : "文字",
|
|
|
+ name: this.lang.ssText,
|
|
|
toolType: 6,
|
|
|
},
|
|
|
]
|
|
|
@@ -780,12 +781,12 @@ export default {
|
|
|
|
|
|
this.tools = [{
|
|
|
icon: "#icon-huabi_huaban1",
|
|
|
- name: this.lang ? this.lang.ssBrush : "画笔",
|
|
|
+ name: this.lang.ssBrush,
|
|
|
toolType: 1,
|
|
|
},
|
|
|
{
|
|
|
icon: "#icon-wenzi_huaban1",
|
|
|
- name: this.lang ? this.lang.ssText : "文字",
|
|
|
+ name: this.lang.ssText,
|
|
|
toolType: 6,
|
|
|
},
|
|
|
]
|