|
|
|
@ -1,17 +1,16 @@ |
|
|
|
<template> |
|
|
|
<div class="home"> |
|
|
|
<div> |
|
|
|
<div v-if="show" style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px"> |
|
|
|
<!-- 对齐方式 --> |
|
|
|
<zoom /> |
|
|
|
<div v-if="show" class="img_header"> |
|
|
|
<div style="font-size: 20px; font-weight: bold">眼底绘图</div> |
|
|
|
<div> |
|
|
|
<save @fullImgBack="fullImgBack" /> |
|
|
|
<el-button size="small" @click="closeDialog">关闭</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style=" display: flex; height: calc(100vh - 120px);"> |
|
|
|
<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" style="height: 200px;"> |
|
|
|
<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" /> |
|
|
|
@ -28,40 +27,35 @@ |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<!-- 画笔设置 --> |
|
|
|
<div v-show="menuActive === '4'"> |
|
|
|
<div style="display: inline-block; margin-left: 10px"> |
|
|
|
<button id="drawing-mode" class="btn btn-info">Cancel drawing mode</button><br> |
|
|
|
<button id="clear-canvas" class="btn btn-info">Clear</button><br> |
|
|
|
|
|
|
|
<div id="drawing-mode-options"> |
|
|
|
<label for="drawing-mode-selector">Mode:</label> |
|
|
|
<select id="drawing-mode-selector"> |
|
|
|
<option>Pencil</option> |
|
|
|
<!-- <option>Circle</option>--> |
|
|
|
<!-- <option>Spray</option>--> |
|
|
|
<!-- <option>Pattern</option>--> |
|
|
|
|
|
|
|
<!-- <option>hline</option>--> |
|
|
|
<!-- <option>vline</option>--> |
|
|
|
<!-- <option>square</option>--> |
|
|
|
<option>diamond</option> |
|
|
|
<!-- <option>texture</option>--> |
|
|
|
</select><br> |
|
|
|
|
|
|
|
<label for="drawing-line-width">Line width:</label> |
|
|
|
<span class="info">30</span><input id="drawing-line-width" type="range" value="30" min="30" max="150"><br> |
|
|
|
|
|
|
|
<label for="drawing-color">Line color:</label> |
|
|
|
<input id="drawing-color" type="color" value="#005E7A"><br> |
|
|
|
|
|
|
|
<label for="drawing-shadow-color">Shadow color:</label> |
|
|
|
<input id="drawing-shadow-color" type="color" value="#005E7A"><br> |
|
|
|
|
|
|
|
<label for="drawing-shadow-width">Shadow width:</label> |
|
|
|
<span class="info">0</span><input id="drawing-shadow-width" type="range" value="0" min="0" max="50"><br> |
|
|
|
|
|
|
|
<label for="drawing-shadow-offset">Shadow offset:</label> |
|
|
|
<span class="info">0</span><input id="drawing-shadow-offset" type="range" value="0" min="0" max="50"><br> |
|
|
|
<div v-show="menuActive === '4'" 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-select> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="drawing_item"> |
|
|
|
<div for="drawing-line-width">线条宽度:<span class="info">{{ lineWidth }}</span></div> |
|
|
|
<el-slider v-model="lineWidth" :min="0" :max="150" @change="changeLineWidth" /> |
|
|
|
<input id="drawing-line-width" type="range" value="30" min="0" max="150"> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="drawing_item" style="display: flex;align-items: center"> |
|
|
|
<div for="drawing-color">线条颜色:</div> |
|
|
|
<el-input id="drawing-color" class="toolStyle" type="color" value="#FF0000" /> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- <div class="drawing_item" style="display: flex;align-items: center">--> |
|
|
|
<!-- <div>橡皮擦:</div>--> |
|
|
|
<!-- <el-button @click="setEarser">橡皮擦</el-button>--> |
|
|
|
<!-- </div>--> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -72,9 +66,10 @@ |
|
|
|
<div class="canvas-box"> |
|
|
|
<canvas id="canvas" /> |
|
|
|
</div> |
|
|
|
<zoom /> |
|
|
|
</div> |
|
|
|
<!-- 属性区域 --> |
|
|
|
<div style="width: 380px; height: 100%; padding:10px; overflow-y: auto; background:#fff"> |
|
|
|
<div class="rightTools"> |
|
|
|
<layer v-if="show" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -100,6 +95,7 @@ import layer from '@/page-subspecialty/views/modules/imgEditorFabric/img-editor/ |
|
|
|
import EventHandle from '@/utils/eventHandler' |
|
|
|
|
|
|
|
import { fabric } from 'fabric' |
|
|
|
import 'fabric/src/mixins/eraser_brush.mixin' |
|
|
|
|
|
|
|
// 对齐辅助线 |
|
|
|
import initAligningGuidelines from '@/core/initAligningGuidelines' |
|
|
|
@ -133,7 +129,11 @@ export default { |
|
|
|
return { |
|
|
|
menuActive: '4', |
|
|
|
show: false, |
|
|
|
select: null |
|
|
|
select: null, |
|
|
|
model: '钻石', |
|
|
|
controlBtn: '取消绘图模式', |
|
|
|
controlDrawing: true, |
|
|
|
lineWidth: 30 |
|
|
|
} |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
@ -149,6 +149,7 @@ export default { |
|
|
|
initControls(canvas.c) |
|
|
|
this.$nextTick(() => { |
|
|
|
this.setBrush() |
|
|
|
this.changeModel('钻石') |
|
|
|
}) |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
@ -158,33 +159,10 @@ export default { |
|
|
|
closeDialog() { |
|
|
|
this.$emit('closeDialog') |
|
|
|
}, |
|
|
|
setBrush() { |
|
|
|
// 改变画笔样式 |
|
|
|
changeModel(value, canvas = this.canvas) { |
|
|
|
var $ = function(id) { return document.getElementById(id) } |
|
|
|
var canvas = this.canvas |
|
|
|
fabric.Object.prototype.transparentCorners = false |
|
|
|
|
|
|
|
var drawingModeEl = $('drawing-mode') |
|
|
|
var drawingOptionsEl = $('drawing-mode-options') |
|
|
|
var drawingColorEl = $('drawing-color') |
|
|
|
var drawingShadowColorEl = $('drawing-shadow-color') |
|
|
|
var drawingLineWidthEl = $('drawing-line-width') |
|
|
|
var drawingShadowWidth = $('drawing-shadow-width') |
|
|
|
var drawingShadowOffset = $('drawing-shadow-offset') |
|
|
|
var clearEl = $('clear-canvas') |
|
|
|
|
|
|
|
clearEl.onclick = function() { canvas.clear() } |
|
|
|
|
|
|
|
drawingModeEl.onclick = function() { |
|
|
|
canvas.isDrawingMode = !canvas.isDrawingMode |
|
|
|
if (canvas.isDrawingMode) { |
|
|
|
drawingModeEl.innerHTML = 'Cancel drawing mode' |
|
|
|
drawingOptionsEl.style.display = '' |
|
|
|
} else { |
|
|
|
drawingModeEl.innerHTML = 'Enter drawing mode' |
|
|
|
drawingOptionsEl.style.display = 'none' |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
if (fabric.PatternBrush) { |
|
|
|
var vLinePatternBrush = new fabric.PatternBrush(canvas) |
|
|
|
vLinePatternBrush.getPatternSrc = function() { |
|
|
|
@ -262,39 +240,58 @@ export default { |
|
|
|
var texturePatternBrush = new fabric.PatternBrush(canvas) |
|
|
|
texturePatternBrush.source = img |
|
|
|
} |
|
|
|
|
|
|
|
$('drawing-mode-selector').onchange = function() { |
|
|
|
if (this.value === 'hline') { |
|
|
|
if (value === 'hline') { |
|
|
|
canvas.freeDrawingBrush = vLinePatternBrush |
|
|
|
} else if (this.value === 'vline') { |
|
|
|
} else if (value === 'vline') { |
|
|
|
canvas.freeDrawingBrush = hLinePatternBrush |
|
|
|
} else if (this.value === 'square') { |
|
|
|
} else if (value === 'square') { |
|
|
|
canvas.freeDrawingBrush = squarePatternBrush |
|
|
|
} else if (this.value === 'diamond') { |
|
|
|
} else if (value === '钻石') { |
|
|
|
canvas.freeDrawingBrush = diamondPatternBrush |
|
|
|
} else if (this.value === 'texture') { |
|
|
|
} else if (value === 'texture') { |
|
|
|
canvas.freeDrawingBrush = texturePatternBrush |
|
|
|
} else { |
|
|
|
canvas.freeDrawingBrush = new fabric[this.value + 'Brush'](canvas) |
|
|
|
canvas.freeDrawingBrush = new fabric[value + 'Brush'](canvas) |
|
|
|
} |
|
|
|
|
|
|
|
if (canvas.freeDrawingBrush) { |
|
|
|
var brush = canvas.freeDrawingBrush |
|
|
|
brush.color = drawingColorEl.value |
|
|
|
if (brush.getPatternSrc) { |
|
|
|
brush.source = brush.getPatternSrc.call(brush) |
|
|
|
} |
|
|
|
brush.width = parseInt(drawingLineWidthEl.value, 10) || 1 |
|
|
|
brush.shadow = new fabric.Shadow({ |
|
|
|
blur: parseInt(drawingShadowWidth.value, 10) || 0, |
|
|
|
offsetX: 0, |
|
|
|
offsetY: 0, |
|
|
|
affectStroke: true, |
|
|
|
color: drawingShadowColorEl.value |
|
|
|
}) |
|
|
|
brush.width = parseInt(this.lineWidth, 10) || 1 |
|
|
|
} |
|
|
|
}, |
|
|
|
// setEarser() { |
|
|
|
// // canvas.isDrawingMode = true // 启用绘图模式 |
|
|
|
// |
|
|
|
// // 设置橡皮擦样式 |
|
|
|
// canvas.freeDrawingBrush = new fabric.PencilBrush(canvas) |
|
|
|
// canvas.freeDrawingBrush.color = 'rgba(0,0,0,0)' // 设置颜色为透明 |
|
|
|
// canvas.freeDrawingBrush.width = 20 // 设置橡皮擦的大小 |
|
|
|
// }, |
|
|
|
// 打开或关闭绘画模式 |
|
|
|
changeDrawing() { |
|
|
|
this.canvas.isDrawingMode = !this.canvas.isDrawingMode |
|
|
|
if (this.canvas.isDrawingMode) { |
|
|
|
this.controlBtn = '取消绘图模式' |
|
|
|
this.controlDrawing = true |
|
|
|
} else { |
|
|
|
this.controlBtn = '开启绘图模式' |
|
|
|
this.controlDrawing = false |
|
|
|
} |
|
|
|
}, |
|
|
|
// 改变线宽 |
|
|
|
changeLineWidth(value) { |
|
|
|
this.lineWidth = value |
|
|
|
this.canvas.freeDrawingBrush.width = parseInt(this.lineWidth, 10) || 1 |
|
|
|
}, |
|
|
|
setBrush() { |
|
|
|
var $ = function(id) { return document.getElementById(id) } |
|
|
|
var canvas = this.canvas |
|
|
|
fabric.Object.prototype.transparentCorners = false |
|
|
|
|
|
|
|
var drawingColorEl = $('drawing-color') |
|
|
|
drawingColorEl.onchange = function() { |
|
|
|
var brush = canvas.freeDrawingBrush |
|
|
|
brush.color = this.value |
|
|
|
@ -302,34 +299,10 @@ export default { |
|
|
|
brush.source = brush.getPatternSrc.call(brush) |
|
|
|
} |
|
|
|
} |
|
|
|
drawingShadowColorEl.onchange = function() { |
|
|
|
canvas.freeDrawingBrush.shadow.color = this.value |
|
|
|
} |
|
|
|
drawingLineWidthEl.onchange = function() { |
|
|
|
canvas.freeDrawingBrush.width = parseInt(this.value, 10) || 1 |
|
|
|
this.previousSibling.innerHTML = this.value |
|
|
|
} |
|
|
|
drawingShadowWidth.onchange = function() { |
|
|
|
canvas.freeDrawingBrush.shadow.blur = parseInt(this.value, 10) || 0 |
|
|
|
this.previousSibling.innerHTML = this.value |
|
|
|
} |
|
|
|
drawingShadowOffset.onchange = function() { |
|
|
|
canvas.freeDrawingBrush.shadow.offsetX = parseInt(this.value, 10) || 0 |
|
|
|
canvas.freeDrawingBrush.shadow.offsetY = parseInt(this.value, 10) || 0 |
|
|
|
this.previousSibling.innerHTML = this.value |
|
|
|
} |
|
|
|
|
|
|
|
if (canvas.freeDrawingBrush) { |
|
|
|
canvas.freeDrawingBrush.color = drawingColorEl.value |
|
|
|
canvas.freeDrawingBrush.source = canvas.freeDrawingBrush.getPatternSrc && canvas.freeDrawingBrush.getPatternSrc.call(this) |
|
|
|
canvas.freeDrawingBrush.width = parseInt(drawingLineWidthEl.value, 10) || 1 |
|
|
|
canvas.freeDrawingBrush.shadow = new fabric.Shadow({ |
|
|
|
blur: parseInt(drawingShadowWidth.value, 10) || 0, |
|
|
|
offsetX: 0, |
|
|
|
offsetY: 0, |
|
|
|
affectStroke: true, |
|
|
|
color: drawingShadowColorEl.value |
|
|
|
}) |
|
|
|
canvas.freeDrawingBrush.width = parseInt(this.lineWidth, 10) || 1 |
|
|
|
} |
|
|
|
var mainScriptEl = document.getElementById('main') |
|
|
|
if (!mainScriptEl) return |
|
|
|
@ -357,16 +330,70 @@ export default { |
|
|
|
} |
|
|
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
|
|
.toolStyle{ |
|
|
|
flex: 1; |
|
|
|
margin-left: 10px; |
|
|
|
background: none; |
|
|
|
::v-deep .el-input__inner{ |
|
|
|
border: 0 !important; |
|
|
|
background-color: #29292a !important; |
|
|
|
} |
|
|
|
} |
|
|
|
.modeStyle{ |
|
|
|
margin-left:10px; |
|
|
|
::v-deep .el-input__inner{ |
|
|
|
border-radius: 5px; |
|
|
|
overflow: hidden !important; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
input{ |
|
|
|
margin-right: 5px; |
|
|
|
} |
|
|
|
::v-deep .el-tabs--left{ |
|
|
|
background: #151515; |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
::v-deep .el-tabs__nav-wrap.is-right::after{ |
|
|
|
background: #151515; |
|
|
|
} |
|
|
|
::v-deep .el-tabs__item{ |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
::v-deep .el-tabs__item.is-active{ |
|
|
|
color: #409EFF; |
|
|
|
} |
|
|
|
::v-deep .el-tabs__nav-wrap.is-left::after{ |
|
|
|
background: #151515 !important; |
|
|
|
} |
|
|
|
::v-deep .ivu-layout-header { |
|
|
|
padding: 0 10px; |
|
|
|
} |
|
|
|
.home,.ivu-layout{ |
|
|
|
height: calc( 100vh - 70px ); |
|
|
|
height: calc( 100vh - 30px ); |
|
|
|
} |
|
|
|
.img_header{ |
|
|
|
padding: 10px; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
background: #515a6e; |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
.info{ |
|
|
|
margin-left: 10px; |
|
|
|
} |
|
|
|
.icon{ |
|
|
|
display: block; |
|
|
|
} |
|
|
|
.rightTools{ |
|
|
|
width: 380px; |
|
|
|
height: 100%; |
|
|
|
padding:10px; |
|
|
|
overflow-y: auto; |
|
|
|
background:#fff; |
|
|
|
background: #29292a; |
|
|
|
} |
|
|
|
.canvas-box{ |
|
|
|
position: absolute; |
|
|
|
top: 50%; |
|
|
|
@ -380,7 +407,16 @@ export default { |
|
|
|
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAHUlEQVQ4jWNgYGAQIYAJglEDhoUBg9+FowbQ2gAARjwKARjtnN8AAAAASUVORK5CYII="); |
|
|
|
background-size: 30px 30px; |
|
|
|
} |
|
|
|
.left-panel{ |
|
|
|
padding: 10px; |
|
|
|
} |
|
|
|
.drawing_item{ |
|
|
|
margin: 10px 0; |
|
|
|
font-size: 16px; |
|
|
|
} |
|
|
|
.content{ |
|
|
|
background: #29292a; |
|
|
|
color: #fff; |
|
|
|
flex: 1; |
|
|
|
width: 200px; |
|
|
|
padding:10px; |
|
|
|
|
bianyaqi
2 years ago