Vue项目实现图片标注的功能（绘制矩形，圆，直线和点，撤销上一步和清空画布）

 项目中包含绘制矩形，圆，直线和点，撤销上一步和清空画布功能。

技术使用canvas实现，废话不多说上代码：

1.公共方法

var history = []
function Point (x, y, type) {this.x = xthis.y = ythis.type = type // 左击 1  右击 3
}
function windowToCanvas (e, mycanvas) {// 返回元素的大小以及位置var rect = mycanvas.getBoundingClientRect()// rect 的宽度会加上 canvas 的 border 会影响精度return new Point(e.clientX - rect.left * (mycanvas.width / rect.width),e.clientY - rect.top * (mycanvas.height / rect.height), e.which)
}
function showLastHistory (ctx, history) {ctx.putImageData(history[history.length - 1]['data'], 0, 0)
}
function addHistoy (history, ctx, mycanvas) {history.push({data: ctx.getImageData(0, 0, mycanvas.width, mycanvas.height)})
}

2.图形绘制方法抽取

// 绘制矩形
drawerRect (ctx, left, top, w, h) {ctx.strokeStyle = '#f00000'// 画笔颜色ctx.lineWidth = '2' // 画笔粗细ctx.save()ctx.beginPath()ctx.rect(left, top, w, h)ctx.stroke()ctx.restore()return {data: [left, top, w, h]}},
// 绘制圆
drawerCircle (ctx, x, y, r) {ctx.strokeStyle = '#f00000'// 画笔颜色ctx.lineWidth = '2' // 画笔粗细ctx.beginPath()// 开始路径ctx.arc(x, y, r, 0, Math.PI * 2, true)// 参数依次为圆心坐标x,y，半径，开始结束角，绘制方向顺时针ctx.stroke()ctx.restore()return {data: [x, y, r]}
},
// 绘制直线
drawerLine (ctx, x, y, z, n) {ctx.save()ctx.fillStyle = '#f00000'ctx.lineWidth = '2' // 画笔粗细ctx.strokeStyle = '#f00000'// 画笔颜色ctx.beginPath()ctx.moveTo(x, y)ctx.lineTo(z, n)ctx.stroke()ctx.restore()return {data: [x, y, z, n]}
},
// 绘制点
drawerPoint (ctx, x, y) {ctx.save()ctx.fillStyle = '#f00000'ctx.strokeStyle = '#f00000'// 画笔颜色ctx.beginPath()ctx.arc(x, y, 3, 0, Math.PI * 2, true)  ctx.closePath()ctx.fill()ctx.restore()this.posArray.push({data: [x, y]})
},

3.具体绘制的方法及事件

// 绘制的方法及事件，根据当前选择的工具进行不同的方法绘制图形
drawer () {var mycanvas = document.getElementById('mycanvas')var ctx = mycanvas.getContext('2d')let that = thisif (this.renameInfo.tool === '1') {mycanvas.onclick = nullmycanvas.onmousedown = function (e) {that.tempPos = []e.preventDefault()var mousedown = windowToCanvas(e, mycanvas)mycanvas.onmousemove = function (e) {e.preventDefault()showLastHistory(ctx, history) // 每次绘制先清除上一次let point = windowToCanvas(e, mycanvas)let w = Math.abs(point.x - mousedown.x)let h = Math.abs(point.y - mousedown.y)let left = point.x > mousedown.x ? mousedown.x : point.xlet top = point.y > mousedown.y ? mousedown.y : point.ylet pos = that.drawerRect(ctx, left, top, w, h)that.tempPos.push(pos)}mycanvas.onmouseup = function (e) {e.preventDefault()addHistoy(history, ctx, mycanvas) // 保存上一次数据mycanvas.onmousemove = nullthat.posArray.push(that.tempPos[that.tempPos.length - 1])}}addHistoy(history, ctx, mycanvas) // 添加一张默认的数据} else if (this.renameInfo.tool === '2') {// 清除事件mycanvas.onmousedown = nullmycanvas.onmousemove = nullmycanvas.onmouseup = nullmycanvas.onclick = nullmycanvas.onmousedown = function (e) {that.tempPos = []e.preventDefault()var mousedown = windowToCanvas(e, mycanvas)mycanvas.onmousemove = function (e) {e.preventDefault()showLastHistory(ctx, history) // 每次绘制先清除上一次let point = windowToCanvas(e, mycanvas)var rx = (point.x - mousedown.x) / 2var ry = (point.y - mousedown.y) / 2var r = Math.sqrt(rx * rx + ry * ry)let pos = that.drawerCircle(ctx, rx + mousedown.x, ry + mousedown.y, r)that.tempPos.push(pos)}mycanvas.onmouseup = function (e) {e.preventDefault()addHistoy(history, ctx, mycanvas) // 保存上一次数据mycanvas.onmousemove = nullthat.posArray.push(that.tempPos[that.tempPos.length - 1])}}addHistoy(history, ctx, mycanvas) // 添加一张默认的数据} else if (this.renameInfo.tool === '3') {mycanvas.onmousedown = nullmycanvas.onmousemove = nullmycanvas.onmouseup = nullmycanvas.onclick = nullmycanvas.onmousedown = function (e) {that.tempPos = []e.preventDefault()var mousedown = windowToCanvas(e, mycanvas)mycanvas.onmousemove = function (e) {e.preventDefault()showLastHistory(ctx, history) // 每次绘制先清除上一次let point = windowToCanvas(e, mycanvas)let pos = that.drawerLine(ctx, mousedown.x, mousedown.y, point.x, point.y)that.tempPos.push(pos)console.log(that.tempPos)}mycanvas.onmouseup = function (e) {e.preventDefault()addHistoy(history, ctx, mycanvas) // 保存上一次数据mycanvas.onmousemove = nullthat.posArray.push(that.tempPos[that.tempPos.length - 1])}}addHistoy(history, ctx, mycanvas) // 添加一张默认的数据} else if (this.renameInfo.tool === '4') {} else if (this.renameInfo.tool === '5') {mycanvas.onmousedown = nullmycanvas.onmousemove = nullmycanvas.onmouseup = nullmycanvas.onclick = function (event) {var rect = mycanvas.getBoundingClientRect()var CanvasPos = {x: event.clientX - rect.left * (mycanvas.width / rect.width),y: event.clientY - rect.top * (mycanvas.height / rect.height)}that.drawerPoint(ctx, CanvasPos.x, CanvasPos.y)}}},

4.重置画布和撤销上一步

// 重置
resetMap () {// 标注的信息都放在这个数组中this.posArray = []history = [history[0]]var mycanvas = document.getElementById('mycanvas')var ctx = mycanvas.getContext('2d')ctx.clearRect(0, 0, mycanvas.width, mycanvas.height)addHistoy(history, ctx, mycanvas)
},
// 取消上一步操作
cancel () {if (history.length > 1) {console.log(history)this.posArray.pop()history.pop()var mycanvas = document.getElementById('mycanvas')var ctx = mycanvas.getContext('2d')showLastHistory(ctx, history)}
},

以上便是全部代码，可根据自己的需求进行调整。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！