|
|
|
@ -11,30 +11,30 @@ |
|
|
|
<div style=" display: flex; height: calc(100vh - 70px);"> |
|
|
|
<div style="width: 380px; height: 100%; background:#fff; display: flex"> |
|
|
|
<el-tabs v-model="menuActive" tab-position="left"> |
|
|
|
<el-tab-pane label="元素" name="2" /> |
|
|
|
<el-tab-pane label="背景" name="3" /> |
|
|
|
<el-tab-pane label="画笔" name="4" /> |
|
|
|
<el-tab-pane label="元素" name="1" /> |
|
|
|
<el-tab-pane label="背景" name="2" /> |
|
|
|
<el-tab-pane label="画笔" name="3" /> |
|
|
|
</el-tabs> |
|
|
|
<div class="content"> |
|
|
|
<template v-if="show"> |
|
|
|
<div v-show="menuActive === '2'" class="left-panel"> |
|
|
|
<div v-show="menuActive === '1'" class="left-panel"> |
|
|
|
<tools /> |
|
|
|
</div> |
|
|
|
<!-- 背景设置 --> |
|
|
|
<div v-show="menuActive === '3'" class="left-panel"> |
|
|
|
<div v-show="menuActive === '2'" class="left-panel"> |
|
|
|
<set-size /> |
|
|
|
<bg-bar ref="bgBar" :is-od-or-os="isOdOrOs" /> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<!-- 画笔设置 --> |
|
|
|
<div v-show="menuActive === '4'" class="left-panel"> |
|
|
|
<div v-show="menuActive === '3'" class="left-panel"> |
|
|
|
<div style="display: inline-block"> |
|
|
|
<el-button type="primary" class="btn btn-info" size="small" @click="changeDrawing">{{ controlBtn }}</el-button> |
|
|
|
<div v-if="controlDrawing"> |
|
|
|
<div class="drawing_item" style="display: flex"> |
|
|
|
<span for="drawing-mode-selector">风格:</span> |
|
|
|
<el-select id="drawing-mode-selector" v-model="model" class="modeStyle" style="flex: 1" @change="changeModel"> |
|
|
|
<el-option :value="'Pencil'">Pencil</el-option> |
|
|
|
<el-option :value="'铅笔'">铅笔</el-option> |
|
|
|
<el-option :value="'钻石'">钻石</el-option> |
|
|
|
</el-select> |
|
|
|
</div> |
|
|
|
@ -47,14 +47,14 @@ |
|
|
|
<div for="drawing-color">线条颜色:</div> |
|
|
|
<el-input id="drawing-color" class="toolStyle" type="color" value="#FF0000" /> |
|
|
|
</div> |
|
|
|
<div class="drawing_item" id="eraser-btn" style="display: flex;align-items: center"> |
|
|
|
<div id="eraser-btn" class="drawing_item" style="display: flex;align-items: center"> |
|
|
|
<div>橡皮擦: </div> |
|
|
|
<el-button size="mini" @click="setEarser" type="text" style="font-size: 16px;margin-left: 4px">橡皮擦</el-button> |
|
|
|
<!-- <span @click="setUndoErasing">恢复擦拭</span>--> |
|
|
|
<el-button size="mini" type="text" style="font-size: 16px;margin-left: 4px" @click="setEarser">橡皮擦</el-button> |
|
|
|
<!-- <span @click="setUndoErasing">恢复擦拭</span>--> |
|
|
|
</div> |
|
|
|
<div class="drawing_item" style="display: flex;align-items: center"> |
|
|
|
<div>画笔: </div> |
|
|
|
<el-button size="mini" @click="changeModel('钻石')" type="text" style="font-size: 16px;margin-left: 4px">画笔</el-button> |
|
|
|
<el-button size="mini" type="text" style="font-size: 16px;margin-left: 4px" @click="changeModel('钻石')">画笔</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -126,7 +126,7 @@ export default { |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
menuActive: '4', |
|
|
|
menuActive: '3', |
|
|
|
show: false, |
|
|
|
select: null, |
|
|
|
model: '钻石', |
|
|
|
@ -135,6 +135,16 @@ export default { |
|
|
|
lineWidth: 30 |
|
|
|
} |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
menuActive(value) { |
|
|
|
if (value !== '3') { |
|
|
|
this.canvas.isDrawingMode = false |
|
|
|
} else { |
|
|
|
this.canvas.isDrawingMode = true |
|
|
|
} |
|
|
|
console.log(this.canvas.isDrawingMode) |
|
|
|
} |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.canvas = canvas.c = new fabric.Canvas('canvas', { |
|
|
|
isDrawingMode: true |
|
|
|
@ -249,8 +259,9 @@ export default { |
|
|
|
canvas.freeDrawingBrush = diamondPatternBrush |
|
|
|
} else if (value === 'texture') { |
|
|
|
canvas.freeDrawingBrush = texturePatternBrush |
|
|
|
} else { |
|
|
|
canvas.freeDrawingBrush = new fabric[value + 'Brush'](canvas) |
|
|
|
} else if (value === '铅笔') { |
|
|
|
const text = 'Pencil' |
|
|
|
canvas.freeDrawingBrush = new fabric[text + 'Brush'](canvas) |
|
|
|
} |
|
|
|
if (canvas.freeDrawingBrush) { |
|
|
|
var brush = canvas.freeDrawingBrush |
|
|
|
@ -278,6 +289,8 @@ export default { |
|
|
|
// 打开或关闭绘画模式 |
|
|
|
changeDrawing() { |
|
|
|
this.canvas.isDrawingMode = !this.canvas.isDrawingMode |
|
|
|
console.log(this.canvas.isDrawingMode) |
|
|
|
|
|
|
|
if (this.canvas.isDrawingMode) { |
|
|
|
this.controlBtn = '取消绘图模式' |
|
|
|
this.controlDrawing = true |
|
|
|
|
bianyaqi
2 years ago