<template>
<div class="edit-anchor-zone">
<div class="edit-toolbar">
<span class="toolbar-icon-wrap" :class="{'icon_active': isAnchorActive}">
<el-tooltip class="item" effect="light" content="框选锚点" placement="top">
<el-button><i class="iconfont icon-OCR-circleselect toolbar-icon" @click="drawAnchor"></i></el-button>
</el-tooltip>
</span>
<span class="toolbar-icon-wrap" :class="{'icon_active': isTableActive}" v-if="!setAnchorFlag">
<el-tooltip class="item" effect="light" content="框选列表" placement="top">
<el-button><i class="iconfont icon-OCR-table toolbar-icon" @click="drawTable"></i></el-button>
</el-tooltip>
</span>
<span class="toolbar-icon-wrap" :class="{'icon_active': isdrawActive}">
<el-tooltip class="item" effect="light" content="拖拽画布" placement="top">
<el-button><i class="iconfont icon-OCR-drafting toolbar-icon" @click="dragDraw"></i></el-button>
</el-tooltip>
</span>
<span class="toolbar-icon-wrap" :class="{'icon_active': isZoomInActive}">
<el-tooltip class="item" effect="light" content="放大" placement="top">
<el-button><i class="iconfont icon-Zoomin toolbar-icon" @click="zoomIn"></i></el-button>
</el-tooltip>
</span>
<span class="toolbar-icon-wrap" :class="{'icon_active': isZoomOutActive}">
<el-tooltip class="item" effect="light" content="缩小" placement="top">
<el-button><i class="iconfont icon-Zoomout toolbar-icon" @click="zoomOut"></i></el-button>
</el-tooltip>
</span>
<span class="toolbar-icon-wrap" :class="{'icon_active': isAdaptDrawActive}">
<el-tooltip class="item" effect="light" content="适应画布" placement="top">
<el-button><i class="iconfont icon-OCR-autoadaptation toolbar-icon" @click="adaptDraw"></i></el-button>
</el-tooltip>
</span>
<span class="toolbar-icon-wrap" :class="{'icon_active': isSetOriginActive}">
<el-tooltip class="item" effect="light" content="原图" placement="top">
<el-button><i class="iconfont icon-OCR-test toolbar-icon" @click="setOriginSize"></i></el-button>
</el-tooltip>
</span>
</div>
<div class="edit-body">
<div v-if="isLoading" class="init-page-tip">
<i class="el-icon-loading"></i>
<p>模板加载中,请稍后</p>
</div>
<div class="canvas-wrapper" ref='canvasWrapper'>
<canvas width="1000" height="700" ref="baseCanvas" class='canvas'></canvas>
</div>
</div>
<el-dialog title="请选择分割列数" :visible.sync="tableVisible" width="30%">
<div class="select-wrapper">
<div class="select">列数: <el-input-number v-model="tableCol" :min="2" :max="10" size='small'></el-input-number>
</div>
</div>
</el-dialog>
<div style="margin-top:20px;">
<el-button @click="mark">标记</el-button>
<el-button @click="target">目标</el-button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
//toolbar
isAnchorActive: false,
isTableActive: false,
isdrawActive: false,
isZoomInActive: false,
isZoomOutActive: false,
isAdaptDrawActive: false,
isSetOriginActive: false,
// loading img
isLoading: true,
// refs
wrapperTarget: null,
baseTarget: null,
baseInstance: null,
selectId: null,
currentCursor: null,
centerLineIndex: null,
centerLineShow: true,
//base data
drawWidth: 1000,
drawHeight: 700,
initScaleVal: 1,
currentScaleVal: 1,
circlsRadius: 2,
step: 0.05000,
minSelectArea: 15,
imgWidth: 0,
imgHeight: 0,
imgBase64Code: 0,
movePoint: {
x: null, y: null, width: null, height: null },
// 选框
setAnchorFlag: true, // true 为 rectList1 , false 为 rectList2
rectList1: [],
rectList2: [],
tableList: [],
tableVisible: false,
tableCol: 2,
color1: '#FF7782',
color2: '#1E82FD',
color3: '#4b1efd',
opacity: 0.3,
lineWidth: 2,
}
},
watch: {
rectList1: function (newVal, oldVal) {
console.log('rectList1: ', newVal)
},
rectList2: function (newVal, oldVal) {
console.log('rectList2: ', newVal)
},
tableList: function (newVal, oldVal) {
console.log('tableList: ', newVal)
},
},
methods: {
mark() {
this.setAnchorFlag = true
this.initDrawRect()
this.drawAnchor()
},
target() {
this.setAnchorFlag = false
this.initDrawRect()
this.drawAnchor()
},
initDraw(data) {
this.isLoading = false;
this.imgWidth = 1913;
this.imgHeight = 1122;
this.imgBase64Code = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1576560618051&di=b89a65984c6a0e5c4c8a3de5aa8f0fcd&imgtype=0&src=http%3A%2F%2Fimage.biaobaiju.com%2Fuploads%2F20180803%2F20%2F1533300579-gnUBlQZPbt.jpg'
this.baseTarget = this.$refs.baseCanvas
this.wrapperTarget = this.$refs.canvasWrapper
this.computeInitData();
this.drawCanvas();
this.drawAnchor();
},
computeInitData() {
let widthRatio = (this.drawWidth / this.imgWidth).toPrecision(5),
heightRatio = (this.drawHeight / this.imgHeight).toPrecision(5);
this.baseInstance = this.baseTarget.getContext('2d')
this.initScaleVal = this.currentScaleVal = widthRatio >= heightRatio ? heightRatio : widthRatio;
if (this.initScaleVal < 0.10) {
this.initScaleVal = 0.10;
this.currentScaleVal = 0.10;
}
if (this.initScaleVal > 4) {
this.initScaleVal = 4;
this.currentScaleVal = 4;
}
if (this.initScaleVal >= 1) {
this.circlsRadius = 2;
} else {
this.circlsRadius = 4;
}
},
zoomIn() {
this.setToolBarUnactive();
this.isZoomInActive = true;
this.dragDrawX = 0;
this.dragDrawY = 0;
if (this.currentScaleVal > 4) {
return;
};
this.adapt(this.currentScaleVal, parseFloat(this.currentScaleVal) + this.step)
this.currentScaleVal = parseFloat(this.currentScaleVal) + this.step;
this.drawCanvas();
},
zoomOut() {
this.setToolBarUnactive();
this.isZoomOutActive = true;
this.dragDrawX = 0;
this.dragDrawY = 0;
if (this.currentScaleVal <= 0.10) {
return;
}
this.adapt(this.currentScaleVal, parseFloat(this.currentScaleVal) - this.step)
this.currentScaleVal -= this.step;
this.drawCanvas();
},
setOriginSize() {
this.setToolBarUnactive();
this.isSetOriginActive = true;
this.adapt(this.currentScaleVal, 1)
this.currentScaleVal = 1;
this.drawCanvas();
},
adaptDraw() {
this.setToolBarUnactive();
this.isAdaptDrawActive = true;
this.adapt(this.currentScaleVal, this.initScaleVal)
this.currentScaleVal = this.initScaleVal;
this.dragDrawX = 0;
this.dragDrawY = 0;
this.drawCanvas();
},
dragDraw() {
this.setToolBarUnactive();
this.isdrawActive = true;
this.baseTarget.style.cursor = 'move'
this.dragCanvas()
},
drawAnchor() {
this.setToolBarUnactive();
this.isAnchorActive
canvas 实现拖拽选框、放大缩小等功能
最新推荐文章于 2024-06-17 14:58:27 发布