diff --git a/public/index.html b/public/index.html index 6f52be6..f449c2f 100644 --- a/public/index.html +++ b/public/index.html @@ -39,8 +39,8 @@ <% if (process.env.VUE_APP_NODE_ENV === 'dev') { %> <% } %> diff --git a/src/page-subspecialty/views/modules/formList/laserSurgery.vue b/src/page-subspecialty/views/modules/formList/laserSurgery.vue index 7e71530..212aa31 100644 --- a/src/page-subspecialty/views/modules/formList/laserSurgery.vue +++ b/src/page-subspecialty/views/modules/formList/laserSurgery.vue @@ -178,6 +178,7 @@
示意图
+
@@ -448,7 +449,6 @@ export default { } img{ height: calc(100% - 20px); - transform: rotate(180deg); } } .treatAction{ diff --git a/src/page-subspecialty/views/modules/imgEditorFabric/index.vue b/src/page-subspecialty/views/modules/imgEditorFabric/index.vue index e020fd4..b6e3ae0 100644 --- a/src/page-subspecialty/views/modules/imgEditorFabric/index.vue +++ b/src/page-subspecialty/views/modules/imgEditorFabric/index.vue @@ -35,17 +35,16 @@ 风格: 铅笔 - 钻石 + 圆点
线条宽度:{{ lineWidth }}
-
-
线条颜色:
- +
线条颜色:
+
橡皮擦:
@@ -54,7 +53,7 @@
画笔:
- 画笔 + 画笔
@@ -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; +}