如下图所示,在图片上做标记,如圆形、矩形等。
该demo实现画布在页面布局中缩放后居中显示,可拖拽、缩放、做标记说明。
项目下载地址:https://gitlab.com/zhangcw66/draw_mark
如粘贴以下代码,请安装zrender
<template>
<div class="draw-mark">
<div id="canvas" style="height:710px;background-color:#F5F5F5"></div>
</div>
</template>
<script>
import zrender from 'zrender'
export default {
name: 'DrawMark',
data() {
return {
imgSrc: require('@/assets/timg.jpg'),
markInfo: [[440, 260],[590, 360],[770, 370]],
isShowPoint: true,
zr: {
},
// zrender group实例
group: {
},
imgWidth: 0, // 大图宽度
imgHeight: 0, // 大图高度
whRatio: 0, // 大图比例
frameScale: 0, // 缩放比
subSet: [], // 存放已经绘画完成的矩形框信息
circle: {
},
scale: 1,
scaleMax: 15, // 最大比例
scaleMin: 0.5 // 最小比例
}
},
mounted() {
this.initCanvas()
},
methods: {
// 初始化画布绘制图片
initCanvas() {
const vm = this
// 获取放置画布的元素
const container = document.getElementById('canvas')
// 初始化zr实例 zrender容器
vm.zr = zrender.init(container)
vm.group = new zrender.Group({
slient: true // 组内子孙元素是否响应鼠标事件
})
// 创建图片对象
const imgs = new Image()
// 图片的src等于大图的地址
imgs.crossOrigin = 'Anonymous'
imgs.setAttribute('crossOrigin', 'Anonymous')
imgs.src = this.imgSrc
imgs.onerror = _ => {
this.$message.error('图片加载失败!')
return false
}