// Drawing methods and events, draw the graphics in different ways according to the currently selected tool
drawer () {
var mycanvas = document.getElementById('mycanvas')
var ctx = mycanvas.getContext('2d')
let that = this
if (this.renameInfo.tool === '1') {
mycanvas.onclick = null
mycanvas.onmousedown = function (e) {
that.tempPos = []
e.preventDefault()
var mousedown = windowToCanvas(e, mycanvas)
mycanvas.onmousemove = function (e) {
e.preventDefault()
showLastHistory(ctx, history) // Clear the last time each drawing
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.x
let top = point.y > mousedown.y ? mousedown.y : point.y
let pos = that.drawerRect(ctx, left, top, w, h)
that.tempPos.push(pos)
}
mycanvas.onmouseup = function (e) {
e.preventDefault()
addHistoy(history, ctx, mycanvas) // Save the last data
mycanvas.onmousemove = null
that.posArray.push(that.tempPos[that.tempPos.length - 1])
}
}
addHistoy(history, ctx, mycanvas) // Add a default data
} else if (this.renameInfo.tool === '2') {
// Clear the event
mycanvas.onmousedown = null
mycanvas.onmousemove = null
mycanvas.onmouseup = null
mycanvas.onclick = null
mycanvas.onmousedown = function (e) {
that.tempPos = []
e.preventDefault()
var mousedown = windowToCanvas(e, mycanvas)
mycanvas.onmousemove = function (e) {
e.preventDefault()
showLastHistory(ctx, history) // Clear the last time each drawing
let point = windowToCanvas(e, mycanvas)
var rx = (point.x - mousedown.x) / 2
var ry = (point.y - mousedown.y) / 2
var 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) // Save the last data
mycanvas.onmousemove = null
that.posArray.push(that.tempPos[that.tempPos.length - 1])
}
}
addHistoy(history, ctx, mycanvas) // Add a default data
} else if (this.renameInfo.tool === '3') {
mycanvas.onmousedown = null
mycanvas.onmousemove = null
mycanvas.onmouseup = null
mycanvas.onclick = null
mycanvas.onmousedown = function (e) {
that.tempPos = []
e.preventDefault()
var mousedown = windowToCanvas(e, mycanvas)
mycanvas.onmousemove = function (e) {
e.preventDefault()
showLastHistory(ctx, history) // Clear the last time each drawing
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) // Save the last data
mycanvas.onmousemove = null
that.posArray.push(that.tempPos[that.tempPos.length - 1])
}
}
addHistoy(history, ctx, mycanvas) // Add a default data
} else if (this.renameInfo.tool === '4') {
} else if (this.renameInfo.tool === '5') {
mycanvas.onmousedown = null
mycanvas.onmousemove = null
mycanvas.onmouseup = null
mycanvas.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)
}
}
},