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