FaceCanvas.vue

<template>
	<div class="modal-body">
		<div class="modal-editbox">
			<button v-for="(item,index) in typeData" :class="{'curmodal':index==cindex}" @click="changeLayer(index)" :key="index">{{item}}</button>
		</div>
		<div class="modal-left">
			<div class="modal-lb" id="edit_list">
				<el-radio-group v-model="canvasState">
					<el-radio-button :label="1">添加</el-radio-button >
					<el-radio-button :label="0">编辑</el-radio-button >
				</el-radio-group>
				<div v-if="!canvasState">
					<button @click='delShape' class="delbtn">删除</button>
				</div>
			</div>
		</div>
		<div class="modal-right">
			<div class="pic" :style="{ backgroundImage: 'url('+ bgUrl +')', backgroundRepeat: 'no-repeat' }"><img :src="bgUrl" id='bg' /></div>
			<div id='safeCanvas'></div>
		</div>
	</div>
</template>

<script>
	import LightCanvas from './LightCanvas'
	export default {
		name: 'zoneSetting',
		data() {
			return {
				color: ["222,50,212", "24,0,254", "0,254,137", "255,255,0", "138,43,226"],
				typeData:['预览','设置检测区域'],
				drawState: -1,
				canvasState:0,
				needRect:false,
				curShape:null,
                needLine:false,
				layers: [],
				roiBody: {},
				XMLStr: ''
			}
        },
        props:['bgUrl'],
		methods: {
			stageInit: function (params) {
				console.log('init')
				document.getElementsByClassName('pic')[0].style.background = 'url("'+ this.bgUrl +'") no-repeat';
				document.getElementsByClassName('pic')[0].style.backgroundSize = 'cover';
                this.stage =  new Kinetic.Stage({
					container: "safeCanvas", //<div>的id 
					width: 800, //创建的舞台宽度 
					height: 500 //创建的舞台高度 
				});
				this.shadowLayer = new Kinetic.Layer({  
					id: "shadowLayer",
				});
				this.testLayer = new Kinetic.Layer({  
					id: "testLayer",
					name:'layer'  
				});
				let shadow = new Kinetic.Rect({
					x: 0, //矩形左上角x坐标 
					y: 0, //矩形左上角y坐标 
					width: 800, //矩形的宽度 
					height: 500, //矩形的高度 
					fill: 'rgba(255,255,255,.2)', //矩形的填充色 
					stroke: "black", //矩形边缘线的颜色
					strokeWidth: 3 //矩形边缘线的宽度
				});
				let that = this
				this.stage.on('click',function(evt) {
				    that.stageClick(evt,this)
				})
				this.stage.on('mousemove',function (evt) {
					that.stageMouseMove(evt,this)
                })
				this.shadowLayer.add(shadow)
				this.stage.add(this.shadowLayer)
				this.stage.add(this.testLayer)
                this.layers = [this.testLayer]
			},
			configInit: function(xml) {
				let safeObj = this.oParse.parseXML(xml).RoiSettings.roi
				//检测区域
				let testPoints = safeObj.points.point
				let ary = []
				for (let i = 0; i < testPoints.length; i++) {
					const point = testPoints[i];
					ary.push(point.split(',')[0].split('=')[1]*800)
					ary.push(point.split(',')[1].split('=')[1]*500)
				}
				let rect = this.drawRect('morePoints',ary,this.color[0])
				this.testLayer.add(rect)
				this.stage.draw()
			},
			changeLayer: function(index) {
                if (this.needRect || this.needLine) {
					let shape = this.needRect ? '区域' : '线段'
					this.$message({
						type:'error',
						message:'当前'+shape+'配置未完成'
					})
					return
				}
                this.layers.forEach((ele)=>{
					ele.setVisible(false)
				})
				this.selectedShape = null
				if (this.drawState!=-1) {
					this.cancleSelectedGroup()
				}
				this.canvasState = 0
				this.drawState = index - 1;
				if (this.drawState == -1) {
					this.layers.forEach((ele)=>{
						ele.setVisible(true)
					})
					this.stage.draw()
				}
				if (index) {
					this.layers[this.drawState].setVisible(true)
					this.layers[this.drawState].draw()
				}
      },
			stageClick: function (evt,box) {  
				if (this.drawState==-1) {
					this.$message({
						type:'info',
						message:'预览模式下无法操作！'
					})
					return
				} 
				if (this.canvasState) {
          this.addShape(evt)
				} else {
					this.cancleSelectedGroup()
					if (evt.target.className!='Rect') {
            this.makeSelectedGroup(evt.target)
					} 
				} 
			},
			addShape: function (evt) {
				let pos = {
					x: evt.evt.offsetX,
					y: evt.evt.offsetY
				}
                let layer = this.layers[this.drawState]
				switch (this.drawState) {
					case 0:
						if (layer.get('.rect').length && !this.needRect) {
							 this.$message({
								 type:'error',
								 message:'只允许设置一个检测区域'
							 })
							 return
						 }
						break;
				}
                this.startChangeShape(pos,layer,this.color[this.drawState])	
			},
			makeSelectedGroup: function (shape) {
				if (this.drawState!=0) {
					let parShape = shape.getParent()
					this.layers[this.drawState].add(shape)
					parShape.destroy()
				}
				this.selectedShape = shape
				let points = shape.attrs.points
				for (let i = 0; i < points.length; i+=2) {
					const pos = {
						x: points[i],
						y: points[i+1]
					};
					let cir = this.drawCircle(pos,this.color[this.drawState],5)
					this.layers[this.drawState].add(cir)
				}
				this.layers[this.drawState].draw()
			},
			cancleSelectedGroup: function () {
				let cirs = this.layers[this.drawState].get('.circle')
				for (let i = 0; i < cirs.length; i++) {
					const cir = cirs[i];
					cir.destroy()
				}
				this.selectedShape = null
				this.layers[this.drawState].draw()
			},
			startChangeShape: function (pos,layer,col) {
                if (this.drawState == 0) {
                    if (!this.needRect) {
						this.needRect = true
						let rect = this.drawRect(pos,pos,col)
						rect.moveToBottom()
						layer.add(rect)
					} else {
						this.needRect = false
						// this.endChangeShape(layer,pos)
					}
				} 
				layer.draw()
			},
            stageMouseMove: function (evt) {  
                if(!this.needLine && !this.needRect) return
                let pos = {
                    x: evt.evt.offsetX,
                    y: evt.evt.offsetY
                }
                 let layer = this.layers[this.drawState]
                if (this.needLine) {
					let lines = layer.get('.line')
				
                    lines[lines.length-1].attrs.points[2]=pos.x
                    lines[lines.length-1].attrs.points[3]=pos.y
                } else if (this.needRect) {
                    let rects = layer.get('.rect')
                    let rect = rects[rects.length-1]
                    rect.moveToBottom()
                    rect.attrs.points[3] = pos.y
                    rect.attrs.points[4] = pos.x
                    rect.attrs.points[5] = pos.y,pos
                    rect.attrs.points[6] = pos.x
                    this.curShape = rect
                }
                layer.draw()
			},
            // endChangeShape: function (layer,pos) {
			// 	if (this.needLine) {
			// 		this.needLine = false

			// 		let start = layer.get('.circle')[0]
			// 		let x = start.attrs.x
			// 		let y = start.attrs.y
			// 		start.destroy()
			// 		let group = new Kinetic.Group({
			// 			name: 'arr'
			// 		})
			// 		let lines = layer.get('.line')
			// 		let line = lines[lines.length-1]

			// 		this.drawArrow([x,y],[pos.x,pos.y],30, 20, 3, this.color[this.drawState],layer,group,line)
			// 	} else {
			// 		this.needRect = false
			// 	}
            // },
			drawCircle:function (pos,col,r) {
                let size = r || 2
				let circle = new Kinetic.Circle({
				    x: pos.x,
					y: pos.y,
					fill: 'rgb('+col+')',
				    radius: size,
                    name: 'circle',
                    draggable:true
                });
               
                circle.on("dragmove",  (evt)=> {
                    evt.cancelBubble = true
                    this.changeRect(evt)
                })
               
                return circle
			},
			drawLine: function (start,end,col) {
				let points = [start.x,start.y,end.x,end.y]
				let name = 'line';
				if (this.drawState==2 && this.needLine) {
					name = 'centerLine'
				}
				let line = new Kinetic.Line({
					x: 0,
					points: points,
					tension: 0.5,
					closed: false,
					stroke: 'rgb('+col+')',
					strokeWidth: 3,
					name: name
				});
				
				return line
            },
            drawRect: function (start,end,color) {
				 let points ;
				if (start==='morePoints') {
					points = end
				} else {
					points = [start.x,start.y,start.x,end.y,end.x,end.y,end.x,start.y]
				}
                let rect = new Kinetic.Line({
					x: 0,
					points: points,
					// tension: 0.5,
					closed: true,
					stroke: 'rgb('+color+')',
					strokeWidth: 3,
                    name:'rect',
					fill:'rgba('+color+',0.3)',
				});
				
				return rect
            },
            changeRect: function (evt) {
                let rects = evt.target.getParent().get('.rect')
				let cirs = evt.target.getParent().get('.circle')
				let points = []
                cirs.forEach((ele)=>{
                   points.push(ele.attrs.x)
                   points.push(ele.attrs.y)
				})
				  
                this.selectedShape.attrs.points = points
                this.layers[this.drawState].draw()
            },
			
			delShape: function() {
                if (!this.selectedShape) {
					return
				}
				this.selectedShape.destroy()
				this.selectedShape = null
				this.cancleSelectedGroup()
			},
			save: function() {
				let points = this.testLayer.get('.rect')[0].attrs.points
				let ary = []
				for (let i = 0; i < points.length; i+=2) {
					const x = points[i];
					const y = points[i+1];
					ary.push('x='+(x/800).toFixed(6)+',y=' + (y/500).toFixed(6))
				}
				this.roiBody = {
					roi  : {
						type: 3,
						points: {
							point: ary
						}
					}
				}
				this.XMLStr = this.oParse.writeXML({
					roilist: this.roiBody
				})
				console.log(this.roiBody)
				return this.oParse.writeXML({RoiSettings: this.roiBody})
			},
			clear: function () {	
				this.drawState = -1,
                this.needRect = false,
				this.needLine = false
			}
		}
	}
</script>

<style scoped>
	button {
		width: 10%;
	}
	
	.modal-title {
		float: left;
		width: 93%;
		overflow: hidden;
	}
	
	.settingZone {
		width: 100px;
		float:left;
		margin-right: 15px;
	}
	
	.settingZone>button {
		width: 100px;
	}
	
	.modal-body {
		height: 540px!important;
		padding-left: 3%;
	}
	.modal-editbox{
		width: 100%;
		margin-bottom: 10px;
		text-align: center;
	}
	.modal-editboxbutton {
		width: 12%;
		margin:0 1%
	}
	.modal-editboxbutton.active {
        background: #145B93!important
    }
	.modal-left {
		float: left;
		min-height: 350px;
		width: 15%;
		color: #fff;
		padding-top:40px
	}
	.modal-right {
		position: relative;
		float: left;
		text-align: center;
	}
	
	.modal-left button {
		display: block;
		margin: 10px;
	}
	
	.modal-editboxbutton {
		width: 120px;
	}
	
	.modal-lb button {
		width: 100px;
	}
	
	.pic {
		position: absolute;
		top: 0;
		left: 0;
	}
	
	.pic img {
		width: 800px;
		height: 500px;
		margin: 0;
		padding: 0;
	}
</style>