-
-
-
-
-
-
-
-
-
30
-
-
-
-
-
-
-
-
-
0
-
-
-
0
+
+
+
{{ controlBtn }}
+
+
+
+ 风格:
+
+ Pencil
+ 钻石
+
+
+
+
+
线条宽度:{{ lineWidth }}
+
+
+
+
+
+
+
+
+
+
+
@@ -72,9 +66,10 @@
+
-
@@ -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') {
- canvas.freeDrawingBrush = vLinePatternBrush
- } else if (this.value === 'vline') {
- canvas.freeDrawingBrush = hLinePatternBrush
- } else if (this.value === 'square') {
- canvas.freeDrawingBrush = squarePatternBrush
- } else if (this.value === 'diamond') {
- canvas.freeDrawingBrush = diamondPatternBrush
- } else if (this.value === 'texture') {
- canvas.freeDrawingBrush = texturePatternBrush
- } else {
- canvas.freeDrawingBrush = new fabric[this.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
- })
+ if (value === 'hline') {
+ canvas.freeDrawingBrush = vLinePatternBrush
+ } else if (value === 'vline') {
+ canvas.freeDrawingBrush = hLinePatternBrush
+ } else if (value === 'square') {
+ canvas.freeDrawingBrush = squarePatternBrush
+ } else if (value === '钻石') {
+ canvas.freeDrawingBrush = diamondPatternBrush
+ } else if (value === 'texture') {
+ canvas.freeDrawingBrush = texturePatternBrush
+ } else {
+ 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(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 {
}