|
|
|
@ -35,17 +35,16 @@ |
|
|
|
<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="'铅笔'">铅笔</el-option> |
|
|
|
<el-option :value="'钻石'">钻石</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> |
|
|
|
<el-color-picker v-model="lineColor" @change="changeColor" /> |
|
|
|
</div> |
|
|
|
<div id="eraser-btn" class="drawing_item" style="display: flex;align-items: center"> |
|
|
|
<div>橡皮擦: </div> |
|
|
|
@ -54,7 +53,7 @@ |
|
|
|
</div> |
|
|
|
<div class="drawing_item" style="display: flex;align-items: center"> |
|
|
|
<div>画笔: </div> |
|
|
|
<el-button size="mini" type="text" style="font-size: 16px;margin-left: 4px" @click="changeModel('钻石')">画笔</el-button> |
|
|
|
<el-button size="mini" type="text" style="font-size: 16px;margin-left: 4px" @click="changeModel('圆点')">画笔</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -101,6 +100,7 @@ import 'fabric/src/mixins/eraser_brush.mixin' |
|
|
|
import initAligningGuidelines from '@/core/initAligningGuidelines' |
|
|
|
import initHotkeys from '@/core/initHotKeys' |
|
|
|
import initControls from '@/core/initControls' |
|
|
|
import { changeColor } from 'view-design/src/components/color-picker/utils' |
|
|
|
const event = new EventHandle() |
|
|
|
const canvas = {} |
|
|
|
export default { |
|
|
|
@ -129,10 +129,11 @@ export default { |
|
|
|
menuActive: '3', |
|
|
|
show: false, |
|
|
|
select: null, |
|
|
|
model: '钻石', |
|
|
|
model: '圆点', |
|
|
|
controlBtn: '取消绘图模式', |
|
|
|
controlDrawing: true, |
|
|
|
lineWidth: 30 |
|
|
|
lineWidth: 30, |
|
|
|
lineColor: '#FF0000' |
|
|
|
} |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
@ -158,10 +159,17 @@ export default { |
|
|
|
initControls(canvas.c) |
|
|
|
this.$nextTick(() => { |
|
|
|
this.setBrush() |
|
|
|
this.changeModel('钻石') |
|
|
|
this.changeModel('圆点') |
|
|
|
}) |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
changeColor(value) { |
|
|
|
var brush = this.canvas.freeDrawingBrush |
|
|
|
brush.color = this.lineColor |
|
|
|
if (brush.getPatternSrc) { |
|
|
|
brush.source = brush.getPatternSrc.call(brush) |
|
|
|
} |
|
|
|
}, |
|
|
|
fullImgBack(value) { |
|
|
|
this.$emit('fullImgBack', value) |
|
|
|
}, |
|
|
|
@ -171,7 +179,7 @@ export default { |
|
|
|
// 改变画笔样式 |
|
|
|
changeModel(value, canvas = this.canvas) { |
|
|
|
var $ = function(id) { return document.getElementById(id) } |
|
|
|
var drawingColorEl = $('drawing-color') |
|
|
|
const that = this |
|
|
|
if (fabric.PatternBrush) { |
|
|
|
var vLinePatternBrush = new fabric.PatternBrush(canvas) |
|
|
|
vLinePatternBrush.getPatternSrc = function() { |
|
|
|
@ -243,6 +251,24 @@ export default { |
|
|
|
return patternCanvas |
|
|
|
} |
|
|
|
|
|
|
|
var PatternBrush = new fabric.PatternBrush(canvas) |
|
|
|
PatternBrush.getPatternSrc = function() { |
|
|
|
var dotWidth = 10 |
|
|
|
var dotDistance = 5 |
|
|
|
var patternCanvas = fabric.document.createElement('canvas') |
|
|
|
var patternCtx = patternCanvas.getContext('2d') |
|
|
|
|
|
|
|
patternCanvas.width = patternCanvas.height = dotWidth + dotDistance |
|
|
|
|
|
|
|
patternCtx.fillStyle = this.color |
|
|
|
patternCtx.beginPath() |
|
|
|
patternCtx.arc(dotWidth / 2, dotWidth / 2, dotWidth / 2, 0, Math.PI * 2, false) |
|
|
|
patternCtx.closePath() |
|
|
|
patternCtx.fill() |
|
|
|
|
|
|
|
return patternCanvas |
|
|
|
} |
|
|
|
|
|
|
|
var img = new Image() |
|
|
|
img.src = '../assets/honey_im_subtle.png' |
|
|
|
|
|
|
|
@ -259,13 +285,15 @@ export default { |
|
|
|
canvas.freeDrawingBrush = diamondPatternBrush |
|
|
|
} else if (value === 'texture') { |
|
|
|
canvas.freeDrawingBrush = texturePatternBrush |
|
|
|
} else if (value === '圆点') { |
|
|
|
canvas.freeDrawingBrush = PatternBrush |
|
|
|
} else if (value === '铅笔') { |
|
|
|
const text = 'Pencil' |
|
|
|
canvas.freeDrawingBrush = new fabric[text + 'Brush'](canvas) |
|
|
|
} |
|
|
|
if (canvas.freeDrawingBrush) { |
|
|
|
var brush = canvas.freeDrawingBrush |
|
|
|
brush.color = drawingColorEl.value |
|
|
|
brush.color = that.lineColor |
|
|
|
if (brush.getPatternSrc) { |
|
|
|
brush.source = brush.getPatternSrc.call(brush) |
|
|
|
} |
|
|
|
@ -289,7 +317,6 @@ export default { |
|
|
|
// 打开或关闭绘画模式 |
|
|
|
changeDrawing() { |
|
|
|
this.canvas.isDrawingMode = !this.canvas.isDrawingMode |
|
|
|
console.log(this.canvas.isDrawingMode) |
|
|
|
|
|
|
|
if (this.canvas.isDrawingMode) { |
|
|
|
this.controlBtn = '取消绘图模式' |
|
|
|
@ -309,16 +336,8 @@ export default { |
|
|
|
var canvas = this.canvas |
|
|
|
fabric.Object.prototype.transparentCorners = false |
|
|
|
|
|
|
|
var drawingColorEl = $('drawing-color') |
|
|
|
drawingColorEl.onchange = function() { |
|
|
|
var brush = canvas.freeDrawingBrush |
|
|
|
brush.color = this.value |
|
|
|
if (brush.getPatternSrc) { |
|
|
|
brush.source = brush.getPatternSrc.call(brush) |
|
|
|
} |
|
|
|
} |
|
|
|
if (canvas.freeDrawingBrush) { |
|
|
|
canvas.freeDrawingBrush.color = drawingColorEl.value |
|
|
|
canvas.freeDrawingBrush.color = this.lineColor |
|
|
|
canvas.freeDrawingBrush.source = canvas.freeDrawingBrush.getPatternSrc && canvas.freeDrawingBrush.getPatternSrc.call(this) |
|
|
|
canvas.freeDrawingBrush.width = parseInt(this.lineWidth, 10) || 1 |
|
|
|
} |
|
|
|
@ -442,4 +461,8 @@ input{ |
|
|
|
height: 100%; |
|
|
|
overflow-y: auto; |
|
|
|
} |
|
|
|
::v-deep .el-color-picker__trigger{ |
|
|
|
border: 0; |
|
|
|
margin-left: 10px; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
bianyaqi
2 years ago