|
@@ -16,7 +16,7 @@ export default {
|
|
name: 'MarkCanvas',
|
|
name: 'MarkCanvas',
|
|
props: {
|
|
props: {
|
|
// 当前鼠标操作类型
|
|
// 当前鼠标操作类型
|
|
- mouseStatus: {
|
|
|
|
|
|
+ status: {
|
|
type: String,
|
|
type: String,
|
|
default: 'move',
|
|
default: 'move',
|
|
required: true
|
|
required: true
|
|
@@ -28,12 +28,13 @@ export default {
|
|
},
|
|
},
|
|
//canvas绘制图片的数据(eg:添加表情包)
|
|
//canvas绘制图片的数据(eg:添加表情包)
|
|
drawImgData: {
|
|
drawImgData: {
|
|
- type: [String, Object],
|
|
|
|
|
|
+ // type: [String, Object],
|
|
default: ''
|
|
default: ''
|
|
}
|
|
}
|
|
},
|
|
},
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
|
|
+ imgData: undefined,
|
|
stage: undefined,
|
|
stage: undefined,
|
|
orgLayer: undefined,
|
|
orgLayer: undefined,
|
|
markLayer: undefined,
|
|
markLayer: undefined,
|
|
@@ -49,7 +50,7 @@ export default {
|
|
x: 0,
|
|
x: 0,
|
|
y: 0
|
|
y: 0
|
|
},
|
|
},
|
|
- // mouseStatus: 'move', //move:移动 rect:画矩形 resize:调整图形
|
|
|
|
|
|
+ mouseStatus: '', //move:移动 rect:画矩形 resize:调整图形
|
|
resizeBefore: '',
|
|
resizeBefore: '',
|
|
rect: undefined,
|
|
rect: undefined,
|
|
oval: undefined,
|
|
oval: undefined,
|
|
@@ -61,32 +62,20 @@ export default {
|
|
}
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
- uuid() {
|
|
|
|
- function S4() {
|
|
|
|
- return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
|
|
|
|
- }
|
|
|
|
- return (S4() + S4() + '-' + S4() + '-' + S4() + '-' + S4() + '-' + S4() + S4() + S4())
|
|
|
|
- },
|
|
|
|
- move(index) {
|
|
|
|
- this.activeIcon = index
|
|
|
|
|
|
+ move() {
|
|
this.mouseStatus = 'move'
|
|
this.mouseStatus = 'move'
|
|
},
|
|
},
|
|
- drawImg(imgIndex) {
|
|
|
|
- // this.activeIcon = imgIndex
|
|
|
|
- // this.curImg = new Image()
|
|
|
|
- // this.curImg.src = this.imgs[imgIndex]
|
|
|
|
- // this.curImg.onload = () => {
|
|
|
|
- // this.mouseStatus = 'img'
|
|
|
|
- // this.startImg({ x: 100, y: 100 })
|
|
|
|
- // }
|
|
|
|
|
|
+ drawImg() {
|
|
|
|
+ this.mouseStatus = 'img'
|
|
|
|
+ this.startImg({ x: 100, y: 100 })
|
|
},
|
|
},
|
|
startImg(current) {
|
|
startImg(current) {
|
|
let _this = this
|
|
let _this = this
|
|
this.img = new Konva.Image({
|
|
this.img = new Konva.Image({
|
|
- id: this.uuid(),
|
|
|
|
|
|
+ id: this.$tools.guid(),
|
|
draggable: false,
|
|
draggable: false,
|
|
strokeScaleEnabled: false,
|
|
strokeScaleEnabled: false,
|
|
- image: _this.curImg,
|
|
|
|
|
|
+ image: _this.imgData,
|
|
width: 80,
|
|
width: 80,
|
|
height: 80,
|
|
height: 80,
|
|
x: current.x,
|
|
x: current.x,
|
|
@@ -113,8 +102,7 @@ export default {
|
|
this.stage.add(this.markLayer)
|
|
this.stage.add(this.markLayer)
|
|
this.img = null
|
|
this.img = null
|
|
},
|
|
},
|
|
- drawText(index) {
|
|
|
|
- this.activeIcon = index
|
|
|
|
|
|
+ drawText() {
|
|
this.mouseStatus = 'text'
|
|
this.mouseStatus = 'text'
|
|
},
|
|
},
|
|
startText(current) {
|
|
startText(current) {
|
|
@@ -123,7 +111,7 @@ export default {
|
|
if (nodes.length > 0) return
|
|
if (nodes.length > 0) return
|
|
if (!this.text) {
|
|
if (!this.text) {
|
|
this.text = new Konva.Text({
|
|
this.text = new Konva.Text({
|
|
- id: this.uuid(),
|
|
|
|
|
|
+ id: this.$tools.guid(),
|
|
fontSize: 16,
|
|
fontSize: 16,
|
|
text: '',
|
|
text: '',
|
|
fill: 'red',
|
|
fill: 'red',
|
|
@@ -206,21 +194,19 @@ export default {
|
|
this.text.x(current.x)
|
|
this.text.x(current.x)
|
|
this.text.y(current.y)
|
|
this.text.y(current.y)
|
|
}
|
|
}
|
|
- // this.text.zIndex(100)
|
|
|
|
this.tr.nodes([this.text])
|
|
this.tr.nodes([this.text])
|
|
this.markLayer.add(this.tr)
|
|
this.markLayer.add(this.tr)
|
|
this.markLayer.add(this.text)
|
|
this.markLayer.add(this.text)
|
|
this.stage.add(this.markLayer)
|
|
this.stage.add(this.markLayer)
|
|
},
|
|
},
|
|
- drawLine(index) {
|
|
|
|
- this.activeIcon = index
|
|
|
|
|
|
+ drawLine() {
|
|
this.mouseStatus = 'line'
|
|
this.mouseStatus = 'line'
|
|
},
|
|
},
|
|
startLine(current) {
|
|
startLine(current) {
|
|
let _this = this
|
|
let _this = this
|
|
if (!this.line) {
|
|
if (!this.line) {
|
|
this.line = new Konva.Line({
|
|
this.line = new Konva.Line({
|
|
- id: this.uuid(),
|
|
|
|
|
|
+ id: this.$tools.guid(),
|
|
stroke: 'red',
|
|
stroke: 'red',
|
|
strokeWidth: 3,
|
|
strokeWidth: 3,
|
|
draggable: false,
|
|
draggable: false,
|
|
@@ -246,12 +232,10 @@ export default {
|
|
} else {
|
|
} else {
|
|
this.line.points(this.line.points().concat([current.x / _this.scaleDefault, current.y / _this.scaleDefault]))
|
|
this.line.points(this.line.points().concat([current.x / _this.scaleDefault, current.y / _this.scaleDefault]))
|
|
}
|
|
}
|
|
- // this.line.zIndex(1)
|
|
|
|
this.markLayer.add(this.line)
|
|
this.markLayer.add(this.line)
|
|
this.stage.add(this.markLayer)
|
|
this.stage.add(this.markLayer)
|
|
},
|
|
},
|
|
- drawArrow(index) {
|
|
|
|
- this.activeIcon = index
|
|
|
|
|
|
+ drawArrow() {
|
|
this.mouseStatus = 'arrow'
|
|
this.mouseStatus = 'arrow'
|
|
},
|
|
},
|
|
// 绘制箭头
|
|
// 绘制箭头
|
|
@@ -259,7 +243,7 @@ export default {
|
|
let _this = this
|
|
let _this = this
|
|
if (!this.arrow) {
|
|
if (!this.arrow) {
|
|
this.arrow = new Konva.Arrow({
|
|
this.arrow = new Konva.Arrow({
|
|
- id: this.uuid(),
|
|
|
|
|
|
+ id: this.$tools.guid(),
|
|
fill: 'transparent',
|
|
fill: 'transparent',
|
|
stroke: 'red',
|
|
stroke: 'red',
|
|
strokeWidth: 4,
|
|
strokeWidth: 4,
|
|
@@ -290,12 +274,10 @@ export default {
|
|
} else {
|
|
} else {
|
|
this.arrow.points([_this.clickPoint.x / _this.scaleDefault, _this.clickPoint.y / _this.scaleDefault, (current.x) / _this.scaleDefault, (current.y) / _this.scaleDefault])
|
|
this.arrow.points([_this.clickPoint.x / _this.scaleDefault, _this.clickPoint.y / _this.scaleDefault, (current.x) / _this.scaleDefault, (current.y) / _this.scaleDefault])
|
|
}
|
|
}
|
|
- // this.arrow.zIndex(1)
|
|
|
|
this.markLayer.add(this.arrow)
|
|
this.markLayer.add(this.arrow)
|
|
this.stage.add(this.markLayer)
|
|
this.stage.add(this.markLayer)
|
|
},
|
|
},
|
|
- drawOval(index) {
|
|
|
|
- this.activeIcon = index
|
|
|
|
|
|
+ drawOval() {
|
|
this.mouseStatus = 'oval'
|
|
this.mouseStatus = 'oval'
|
|
},
|
|
},
|
|
startOval(current) {
|
|
startOval(current) {
|
|
@@ -305,9 +287,7 @@ export default {
|
|
let ry = (_this.clickPoint.y - current.y) / _this.scaleDefault * 0.5
|
|
let ry = (_this.clickPoint.y - current.y) / _this.scaleDefault * 0.5
|
|
if (!this.oval) {
|
|
if (!this.oval) {
|
|
this.oval = new Konva.Ellipse({
|
|
this.oval = new Konva.Ellipse({
|
|
- id: this.uuid(),
|
|
|
|
- // x: _this.clickPoint.x / _this.scaleDefault,
|
|
|
|
- // y: _this.clickPoint.y / _this.scaleDefault,
|
|
|
|
|
|
+ id: this.$tools.guid(),
|
|
x: _this.clickPoint.x,
|
|
x: _this.clickPoint.x,
|
|
y: _this.clickPoint.y,
|
|
y: _this.clickPoint.y,
|
|
radiusX: rx > 0 ? rx : -rx,
|
|
radiusX: rx > 0 ? rx : -rx,
|
|
@@ -346,18 +326,8 @@ export default {
|
|
this.markLayer.add(this.oval)
|
|
this.markLayer.add(this.oval)
|
|
this.stage.add(this.markLayer)
|
|
this.stage.add(this.markLayer)
|
|
},
|
|
},
|
|
- drawIcon(index) {
|
|
|
|
- this.activeIcon = index
|
|
|
|
- },
|
|
|
|
- review(index) {
|
|
|
|
- this.activeIcon = index
|
|
|
|
- },
|
|
|
|
- cancelFull(index) {
|
|
|
|
- this.activeIcon = index
|
|
|
|
- },
|
|
|
|
//绘制矩形
|
|
//绘制矩形
|
|
- drawRect(index) {
|
|
|
|
- this.activeIcon = index
|
|
|
|
|
|
+ drawRect() {
|
|
this.mouseStatus = 'rect'
|
|
this.mouseStatus = 'rect'
|
|
},
|
|
},
|
|
startRect(current) {
|
|
startRect(current) {
|
|
@@ -365,7 +335,7 @@ export default {
|
|
//判断rect是否初始化
|
|
//判断rect是否初始化
|
|
if (!this.rect) {
|
|
if (!this.rect) {
|
|
this.rect = new Konva.Rect({
|
|
this.rect = new Konva.Rect({
|
|
- id: this.uuid(),
|
|
|
|
|
|
+ id: this.$tools.guid(),
|
|
x: _this.clickPoint.x / _this.scaleDefault,
|
|
x: _this.clickPoint.x / _this.scaleDefault,
|
|
y: _this.clickPoint.y / _this.scaleDefault,
|
|
y: _this.clickPoint.y / _this.scaleDefault,
|
|
width: (current.x - _this.clickPoint.x) / _this.scaleDefault,
|
|
width: (current.x - _this.clickPoint.x) / _this.scaleDefault,
|
|
@@ -444,11 +414,6 @@ export default {
|
|
this.myScale()
|
|
this.myScale()
|
|
}
|
|
}
|
|
},
|
|
},
|
|
- //还原比例
|
|
|
|
- restore() {
|
|
|
|
- this.scaleDefault = 1
|
|
|
|
- this.myScale()
|
|
|
|
- },
|
|
|
|
myScale() {
|
|
myScale() {
|
|
this.stage.children.forEach(item => {
|
|
this.stage.children.forEach(item => {
|
|
item.scale({
|
|
item.scale({
|
|
@@ -522,7 +487,7 @@ export default {
|
|
this.clickPoint = this.getCanvasPoint(e.clientX, e.clientY)
|
|
this.clickPoint = this.getCanvasPoint(e.clientX, e.clientY)
|
|
},
|
|
},
|
|
//鼠标弹起事件
|
|
//鼠标弹起事件
|
|
- canvasMouseUp() {
|
|
|
|
|
|
+ async canvasMouseUp() {
|
|
this.isMouseDown = false
|
|
this.isMouseDown = false
|
|
switch (this.mouseStatus) {
|
|
switch (this.mouseStatus) {
|
|
case 'move':
|
|
case 'move':
|
|
@@ -548,6 +513,11 @@ export default {
|
|
default:
|
|
default:
|
|
break
|
|
break
|
|
}
|
|
}
|
|
|
|
+ if (this.mouseStatus != 'move') {
|
|
|
|
+ let img = await this.saveAsImg()
|
|
|
|
+ this.$emit('getImg', img)
|
|
|
|
+ }
|
|
|
|
+
|
|
},
|
|
},
|
|
//鼠标移动事件
|
|
//鼠标移动事件
|
|
canvasMouseMove(e) {
|
|
canvasMouseMove(e) {
|
|
@@ -582,10 +552,22 @@ export default {
|
|
},
|
|
},
|
|
|
|
|
|
//清除所有批注
|
|
//清除所有批注
|
|
- clear(index) {
|
|
|
|
- this.activeIcon = index
|
|
|
|
|
|
+ clear() {
|
|
this.markLayer.removeChildren()
|
|
this.markLayer.removeChildren()
|
|
this.stage.add(this.markLayer)
|
|
this.stage.add(this.markLayer)
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ /* 保存批注 */
|
|
|
|
+ saveAsImg() {
|
|
|
|
+ return new Promise(async (r, j) => {
|
|
|
|
+ let compressImg = await this.$editorTools.compressImg(this.stage.toDataURL(),
|
|
|
|
+ this.stage.attrs.width, this.stage.attrs.height)
|
|
|
|
+ r({
|
|
|
|
+ base64: compressImg,
|
|
|
|
+ width: this.stage.attrs.width,
|
|
|
|
+ height: this.stage.attrs.height
|
|
|
|
+ })
|
|
|
|
+ })
|
|
}
|
|
}
|
|
},
|
|
},
|
|
mounted() {
|
|
mounted() {
|
|
@@ -640,7 +622,7 @@ export default {
|
|
bgImg: {
|
|
bgImg: {
|
|
handler(n, o) {
|
|
handler(n, o) {
|
|
this.$nextTick(() => {
|
|
this.$nextTick(() => {
|
|
- // this.restore()
|
|
|
|
|
|
+ this.restore()
|
|
this.orgLayer.removeChildren()
|
|
this.orgLayer.removeChildren()
|
|
this.markLayer.removeChildren()
|
|
this.markLayer.removeChildren()
|
|
let imageObj = new Image()
|
|
let imageObj = new Image()
|
|
@@ -667,6 +649,18 @@ export default {
|
|
},
|
|
},
|
|
immediate: true,
|
|
immediate: true,
|
|
deep: true
|
|
deep: true
|
|
|
|
+ },
|
|
|
|
+ drawImgData: {
|
|
|
|
+ handler(n, o) {
|
|
|
|
+ this.imgData = n
|
|
|
|
+ this.drawImg()
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ status: {
|
|
|
|
+ handler(n, o) {
|
|
|
|
+ this.mouseStatus = n
|
|
|
|
+ },
|
|
|
|
+ immediate: true
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|