pc的
canvas.png
移动的
canvas1.png
优化版本 使用 Promise 做了一个流程控制避免了之前快速更新造成的图画缺失，统一了pc和移动的绘图方法函数
<template>
<div class="draw">
<div class="drawTop" ref="drawTop" v-if="lineStep == lineNum">
<div class="drawTopContrllor" @click="isUnfoldFun">
<span>{{ isUnfoldText }}</span>
</div>
<div>
<el-button type @click="resetAll">清空</el-button>
<el-button type @click="repeal">撤销</el-button>
<el-button type @click="canvasRedo">恢复</el-button>
<el-button type @click="downLoad">下载</el-button>
<el-button type @click="resetData">重置</el-button>
</div>
<div>
<el-select v-model="type" placeholder="选择绘制类型">
<el-option
v-for="(item, index) in typeOption"
:key="index"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</div>
<div v-if="type == 'P'">
边数:
<el-input-number
v-model="lineNum"
:min="2"
:step="1"
label="描述文字"
@change="lineStep = lineNum"
></el-input-number>
</div>
<div v-if="type == 'E'">
扁的程度:
<el-input-number
v-model="ellipseR"
:min="0.1"
:max="0.9"
:step="0.1"
label="描述文字"
></el-input-number>
</div>
<div>
边框粗细:
<el-input-number
v-model="lineWidth"
:min="0"
:step="0.1"
label="描述文字"
></el-input-number>
</div>
<div>
<el-radio-group v-model="isFill">
<el-radio :label="true">填充</el-radio>
<el-radio :label="false">不填充</el-radio>
</el-radio-group>
</div>
<div v-if="isFill">
填充颜色:
<el-color-picker v-model="fillStyle"></el-color-picker>
</div>
<div>
线条颜色:
<el-color-picker v-model="strokeStyle"></el-color-picker>
</div>
<div>
背景颜色:
<el-color-picker
v-model="canvasBack"
@change="changeCanvasBack"
></el-color-picker>
</div>
</div>
<div class="drawTop" v-else>
<div>
<el-button type @click="resetP('all')">取消</el-button>
</div>
</div>
<section class="content"></section>
</div>
</template>
<script>
const keys = {
pc: {
eventDown: 'onmousedown',
eventUp: 'onmouseup',
eventMove: 'onmousemove',
xKey: 'layerX',
yKey: 'layerY',
},
mobile: {
eventDown: 'ontouchstart',
eventUp: 'ontouchend',
eventMove: 'ontouchmove',
xKey: 'pageX',
yKey: 'pageY',
},
}
export default {
name: 'draw',
data() {
return {
canvas: '', // 画布对象
ctx: '', // canvas Context('2d') 对象
lineWidth: 1, // 线宽
type: 'L', // 图形类型 默认线条
typeOption: [
{ label: '线', value: 'L' },
{ label: '多边形', value: 'P' },
{ label: '圆', value: 'C' },
{ label: '矩形', value: 'R' },
{ label: '正方形', value: 'Rs' },
{ label: '椭圆', value: 'E' },
],
isFill: false, // 是否填充
canvasHistory: [], // 存放画布每一次操作之后的状态
step: 0, // 历史数组长度记录 截断数组使用
fillStyle: '#fff', // 填充色
strokeStyle: '#fff', // 笔触色
canvasBack: '#000', // 画布背景色
lineNum: 2, // 多边形边数
linePeak: [], // 多边形每一步的落点位置
lineStep: 2, // 多边形剩余步数
ellipseR: 0.5, // 椭圆两中心点的偏移距离
isUnfold: false, // 操作区控制选项
isUnfoldText: '展开操作区',
}
},
computed: {
// pc 移动 统一参数配置区
terminal() {
let terminal = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(
navigator.userAgent
)
let obj = terminal ? keys.mobile : keys.pc
return Object.assign({}, obj, { isMobile: terminal })
},
},
mounted() {
let _this = this
let content = document.getElementsByClassName('content')[0]
this.canvas = document.createElement('canvas')
this.canvas.width = content.clientWidth
this.canvas.height = content.clientHeight
this.ctx = this.canvas.getContext('2d')
this.ctx.fillStyle = this.canvasBack
this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height)
this.canvasHistory.push(_this.canvas.toDataURL())
this.ctx.globalCompositeOperation = this.type
content.appendChild(this.canvas)
this.bindEventLisner()
},
methods: {
// 手机端是否展开操作区
isUnfoldFun() {
this.isUnfold = !this.isUnfold
if (this.isUnfold) {
this.$refs.drawTop.style.height = 'auto'
this.isUnfoldText = '收起操作区'
} else {
this.$refs.drawTop.style.height = '30px'
this.isUnfoldText = '展开操作区'
}
},
// 重置数据
resetData() {
this.fillStyle = '#fff'
this.strokeStyle = '#fff'
this.canvasBack = '#000'
this.lineNum = 2
this.linePeak = []
this.lineStep = 2
this.ellipseR = 0.5
this.lineWidth = 1
this.type = 'L'
this.changeCanvasBack()
},
// 下载画布
downLoad() {
let url = this.canvas.toDataURL('image/png')
let fileName = 'canvas.png'
if ('download' in document.createElement('a')) {
// 非IE下载
const elink = document.createElement('a')
elink.download = fileName
elink.style.display = 'none'
elink.href = url
document.body.appendChild(elink)
elink.click()
document.body.removeChild(elink)
} else {
// IE10+下载
navigator.msSaveBlob(url, fileName)
}
},
// 底色更改，更改后所有东西都不存在
changeCanvasBack() {
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
this.ctx.fillStyle = this.canvasBack
this.ctx.globalAlpha = 1
this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height)
this.canvasHistory = []
this.canvasHistory.push(this.canvas.toDataURL())
this.step = 0
},
// 清空画布及历史记录
resetAll() {
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
this.ctx.fillStyle = this.canvasBack
this.ctx.globalAlpha = 1
this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height)
this.canvasHistory = []
this.canvasHistory.push(this.canvas.toDataURL())
this.step = 0
},
// 清空当前画布
reset(globalAlpha) {
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
this.ctx.fillStyle = this.canvasBack
this.ctx.globalAlpha = globalAlpha ? globalAlpha : 1
this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height)
},
// 绘制多边形时，取消按钮，及绘制完成之后的数据重置
resetP(val) {
this.linePeak = []
this.lineStep = this.lineNum
if (val) {
this.reset()
this.rebroadcast()
}
},
// 创建线性渐变
createLinearGradient(x, y, x1, y1) {
let linearGradient = this.ctx.createLinearGradient(x, y, x1, y1)
linearGradient.addColorStop(0, 'skyblue')
linearGradient.addColorStop(1, 'darkturquoise')
return linearGradient
},
// 创建环形渐变
createRadialGradient(x, y, r, x1, y1, r1) {
let radialGradient = this.ctx.createRadialGradient(x, y, r, x1, y1, r1)
radialGradient.addColorStop(0, 'red')
radialGradient.addColorStop(1, 'white')
return radialGradient
},
// 撤销方法
repeal() {
if (this.step >= 1) {
this.step = this.step - 1
let canvasPic = new Image()
console.log(this.step)
canvasPic.src = this.canvasHistory[this.step]
canvasPic.addEventListener('load', () => {
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
this.ctx.globalAlpha = 1
this.ctx.drawImage(canvasPic, 0, 0)
})
} else {
this.$message.warning('不能再继续撤销了')
}
},
// 恢复方法
canvasRedo() {
if (this.step < this.canvasHistory.length - 1) {
if (this.step == 0) {
this.step = 1
} else {
this.step++
}
let canvasPic = new Image()
canvasPic.src = this.canvasHistory[this.step]
canvasPic.addEventListener('load', () => {
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
this.ctx.globalAlpha = 1
this.ctx.drawImage(canvasPic, 0, 0)
})
} else {
this.$message.warning('已经是最新的记录了')
}
},
// 绘制历史数组中的最后一个
rebroadcast() {
let _this = this
return new Promise((resolve, reject) => {
let canvasPic = new Image()
canvasPic.src = _this.canvasHistory[_this.step]
canvasPic.addEventListener('load', () => {
_this.ctx.clearRect(0, 0, _this.canvas.width, _this.canvas.height)
_this.ctx.globalAlpha = 1
_this.ctx.drawImage(canvasPic, 0, 0)
resolve()
})
})
},
// 获取角度,绘制椭圆
getAngle(px, py, mx, my) {
let x = Math.abs(px - mx)
let y = Math.abs(py - my)
let z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2))
let cos = x / z
let radina = Math.acos(cos) //用反三角函数求弧度
let angle = Math.floor(180 / (Math.PI / radina)) //将弧度转换成角度
if (mx > px && my == py) {
//鼠标在x轴正方向上
angle = 0
}
if (mx > px && my < py) {
//鼠标在第一象限
angle = -angle
}
if (mx == px && my > py) {
//鼠标在y轴负方向上
angle = 90
}
if (mx < px && my < py) {
//鼠标在第二象限
angle = -90 - (90 - angle)
}
if (mx < px && my == py) {
//鼠标在x轴负方向
angle = -180
}
if (mx < px && my > py) {
//鼠标在第三象限
angle = -180 - angle
}
if (mx > px && my > py) {
//鼠标在第四象限
angle = angle
}
return (angle * Math.PI) / 180
},
// 绑定事件,判断分支
bindEventLisner() {
const { eventDown, eventUp, isMobile, xKey, yKey } = this.terminal
let _this = this
let r1, r2 // 绘制圆形，矩形需要
this.canvas[eventDown] = function (target) {
const e = isMobile ? target.changedTouches[0] : target
r1 = e[xKey]
r2 = e[yKey]
_this.useChooseFun(e, 'begin', r1, r2)
}
this.canvas[eventUp] = function (target) {
const e = isMobile ? target.changedTouches[0] : target
_this.useChooseFun(e, 'end', r1, r2)
}
},
useChooseFun(target, status, r1, r2) {
let _this = this
const { eventMove, xKey, yKey, isMobile } = this.terminal
let fun = this[`draw${this.type}`]
if (status == 'begin') {
if (this.type == 'L') {
this.ctx.beginPath()
this.ctx.moveTo(target[xKey], target[yKey])
}
if (this.type == 'P') {
return
}
_this.canvas[eventMove] = function (target) {
let e = isMobile ? target.changedTouches[0] : target
_this.type != 'L' && _this.reset()
fun?.(e, r1, r2, status)
_this.type != 'L' && _this.closeStoke(0.5)
}
} else if (status == 'end') {
if (this.type == 'L') {
this.ctx.closePath()
_this.setStepAndHistory()
return
}
if (this.type == 'P') {
fun?.(target, r1, r2, status)
return
}
_this.rebroadcast().then((res) => {
fun?.(target, r1, r2, status)
_this.closeStoke(1)
_this.setStepAndHistory()
})
}
},
closeStoke(globalAlpha) {
this.ctx.globalAlpha = globalAlpha
this.ctx.strokeStyle = this.strokeStyle
if (this.isFill) this.ctx.fillStyle = this.fillStyle
this.ctx.lineWidth = this.lineWidth
this.ctx.closePath()
this.isFill ? this.ctx.fill() : this.ctx.stroke()
},
setStepAndHistory() {
const { eventMove } = this.terminal
this.step = this.step + 1
if (this.step < this.canvasHistory.length - 1) {
this.canvasHistory.length = this.step // 截断数组
}
this.canvasHistory.push(this.canvas.toDataURL())
this.canvas[eventMove] = null
},
drawC(e, r1, r2, status) {
const { isMobile, xKey, yKey } = this.terminal
let x = e[xKey],
y = e[yKey]
let r
r = Math.sqrt(Math.pow(r1 - x, 2) + Math.pow(r2 - y, 2))
this.ctx.beginPath()
this.ctx.arc(r1, r2, r, 0, 2 * Math.PI)
},
drawL(e, r1, r2, status) {
const { isMobile, xKey, yKey } = this.terminal
let x = e[xKey],
y = e[yKey]
this.ctx.lineTo(x, y)
this.ctx.strokeStyle = this.strokeStyle
this.ctx.lineWidth = this.lineWidth
this.ctx.stroke()
},
drawRs(e, r1, r2, status) {
const { isMobile, xKey, yKey } = this.terminal
let x = e[xKey],
y = e[yKey]
let r
r = Math.abs(Math.min(x - r1, y - r2))
let rx = x - r1 < 0 ? -r : r
let ry = y - r2 < 0 ? -r : r
this.ctx.beginPath()
this.ctx.rect(r1, r2, rx, ry)
},
drawR(e, r1, r2, status) {
const { isMobile, xKey, yKey } = this.terminal
let x = e[xKey],
y = e[yKey]
let rx = x - r1
let ry = y - r2
this.ctx.beginPath()
this.ctx.rect(r1, r2, rx, ry)
},
// 绘制多边形
drawP(e, r1, r2, status) {
let _this = this
const { isMobile, xKey, yKey } = this.terminal
let x = e[xKey],
y = e[yKey]
if (status == 'begin') {
} else if (status == 'end') {
_this.reset()
_this.linePeak.push({ x: x, y: y })
_this.lineStep = _this.lineStep - 1
_this.ctx.beginPath()
_this.ctx.strokeStyle = _this.strokeStyle
_this.ctx.lineWidth = _this.lineWidth
for (let i in _this.linePeak) {
let peak = _this.linePeak[i]
if (i == 0) {
_this.ctx.moveTo(peak.x, peak.y)
} else {
_this.ctx.lineTo(peak.x, peak.y)
}
_this.ctx.stroke()
}
if (_this.lineStep == 0) {
_this.reset()
_this.rebroadcast().then((res) => {
_this.ctx.beginPath()
_this.ctx.strokeStyle = _this.strokeStyle
_this.ctx.lineWidth = _this.lineWidth
for (let i in _this.linePeak) {
let peak = _this.linePeak[i]
if (i == 0) {
_this.ctx.moveTo(peak.x, peak.y)
} else {
_this.ctx.lineTo(peak.x, peak.y)
}
}
_this.closeStoke(1)
_this.resetP()
_this.setStepAndHistory()
})
}
}
},
drawE(e, r1, r2, status) {
const { isMobile, xKey, yKey } = this.terminal
let x = e[xKey],
y = e[yKey]
let r = Math.sqrt(Math.pow(r1 - x, 2) + Math.pow(r2 - y, 2)),
deg = this.getAngle(r1, r2, x, y)
this.ctx.beginPath()
this.ctx.ellipse(r1, r2, r, r * this.ellipseR, deg, 0, 2 * Math.PI)
},
},
}
</script>
<style scope>
* {
box-sizing: border-box;
}
body,
html,
#app {
overflow: hidden;
}
.draw {
height: 100%;
width: 100%;
min-width: 420px;
display: flex;
flex-direction: column;
}
.content {
flex-grow: 1;
height: 100%;
width: 100%;
}
.drawTop {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 5px;
height: 52px;
}
.drawTop > div {
display: flex;
align-items: center;
padding: 5px 5px;
}
div.drawTopContrllor {
display: none;
}
@media screen and (max-width: 1200px) {
.drawTop {
position: absolute;
background-color: white;
width: 100%;
flex-direction: column;
align-items: flex-start;
height: 30px;
overflow: hidden;
}
.drawTopContrllor {
display: flex !important;
height: 30px;
width: 100%;
justify-content: center;
align-items: center;
padding: 0 !important;
}
}
</style>
第一个版本 只保留了有删除和更改的函数
// 绘制历史数组中的最后一个
rebroadcast() {
let canvasPic = new Image();
canvasPic.src = this.canvasHistory[this.step];
canvasPic.addEventListener("load", () => {
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.ctx.globalAlpha = 1;
this.ctx.drawImage(canvasPic, 0, 0);
this.loading = true;
});
}
// 绑定事件,判断分支
bindEventLisner() {
let terminal = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(
navigator.userAgent
);
let _this = this;
let r1, r2; // 绘制圆形，矩形需要
if (terminal) {
this.canvas.ontouchstart = function(e) {
console.log("ontouchstart");
let touch = e.changedTouches[0];
if (_this.type == "C") {
r1 = touch.pageX;
r2 = touch.pageY;
_this.createCM(touch, "begin", r1, r2);
} else if (_this.type == "L") {
_this.createLM(touch, "begin");
} else if (_this.type == "Rs") {
r1 = touch.pageX;
r2 = touch.pageY;
_this.createRsM(touch, "begin", r1, r2);
} else if (_this.type == "R") {
r1 = touch.pageX;
r2 = touch.pageY;
_this.createRM(touch, "begin", r1, r2);
} else if (_this.type == "P") {
_this.createPM(touch, "begin");
} else if (_this.type == "E") {
r1 = touch.pageX;
r2 = touch.pageY;
_this.createEM(touch, "begin", r1, r2);
}
};
this.canvas.ontouchend = function(e) {
console.log("ontouchend");
let touch = e.changedTouches[0];
if (_this.type == "C") {
_this.createCM(e, "end", r1, r2);
r1 = null;
r2 = null;
} else if (_this.type == "L") {
_this.createLM(touch, "end");
} else if (_this.type == "Rs") {
_this.createRsM(e, "end", r1, r2);
r1 = null;
r2 = null;
} else if (_this.type == "R") {
_this.createRM(e, "end", r1, r2);
r1 = null;
r2 = null;
} else if (_this.type == "P") {
_this.createPM(touch, "end");
} else if (_this.type == "E") {
_this.createEM(touch, "end", r1, r2);
r1 = null;
r2 = null;
}
};
} else {
this.canvas.onmousedown = function(e) {
console.log("onmousedown");
if (_this.type == "C") {
r1 = e.layerX;
r2 = e.layerY;
_this.createC(e, "begin", r1, r2);
} else if (_this.type == "L") {
_this.createL(e, "begin");
} else if (_this.type == "Rs") {
r1 = e.layerX;
r2 = e.layerY;
_this.createRs(e, "begin", r1, r2);
} else if (_this.type == "R") {
r1 = e.layerX;
r2 = e.layerY;
_this.createR(e, "begin", r1, r2);
} else if (_this.type == "P") {
_this.createP(e, "begin");
} else if (_this.type == "E") {
r1 = e.layerX;
r2 = e.layerY;
_this.createE(e, "begin", r1, r2);
}
};
this.canvas.onmouseup = function(e) {
console.log("onmouseup");
if (_this.type == "C") {
_this.createC(e, "end", r1, r2);
r1 = null;
r2 = null;
} else if (_this.type == "L") {
_this.createL(e, "end");
} else if (_this.type == "Rs") {
_this.createRs(e, "end", r1, r2);
r1 = null;
r2 = null;
} else if (_this.type == "R") {
_this.createR(e, "end", r1, r2);
r1 = null;
r2 = null;
} else if (_this.type == "P") {
_this.createP(e, "end");
} else if (_this.type == "E") {
_this.createE(e, "end", r1, r2);
r1 = null;
r2 = null;
}
};
}
}
// 绘制线条
createL(e, status) {
let _this = this;
if (status == "begin") {
_this.ctx.beginPath();
_this.ctx.moveTo(e.layerX, e.layerY);
_this.canvas.onmousemove = function(e) {
console.log("onmousemove");
_this.ctx.lineTo(e.layerX, e.layerY);
_this.ctx.strokeStyle = _this.strokeStyle;
_this.ctx.lineWidth = _this.lineWidth;
_this.ctx.stroke();
};
} else if (status == "end") {
_this.ctx.closePath();
_this.step = _this.step + 1;
if (_this.step < _this.canvasHistory.length - 1) {
_this.canvasHistory.length = _this.step; // 截断数组
}
_this.canvasHistory.push(_this.canvas.toDataURL());
_this.canvas.onmousemove = null;
}
}
// 绘制 圆
createC(e, status, r1, r2) {
let _this = this;
let r;
if (status == "begin") {
console.log("onmousemove");
// _this.ctx.moveTo(e.layerX, e.layerY);
_this.canvas.onmousemove = function(e) {
_this.reset();
r = Math.sqrt(
Math.pow(r1 - e.layerX, 2) + Math.pow(r2 - e.layerY, 2)
);
_this.ctx.beginPath();
_this.ctx.arc(r1, r2, r, 0, 2 * Math.PI);
_this.ctx.globalAlpha = 0.5;
_this.ctx.strokeStyle = _this.strokeStyle;
if (_this.isFill) _this.ctx.fillStyle = _this.fillStyle;
_this.ctx.lineWidth = _this.lineWidth;
_this.ctx.closePath();
_this.isFill ? _this.ctx.fill() : _this.ctx.stroke();
};
} else if (status == "end") {
_this.rebroadcast();
let interval = setInterval(() => {
if (_this.loading) {
clearInterval(interval);
_this.loading = false;
} else {
return;
}
r = Math.sqrt(
Math.pow(r1 - e.layerX, 2) + Math.pow(r2 - e.layerY, 2)
);
_this.ctx.beginPath();
_this.ctx.arc(r1, r2, r, 0, 2 * Math.PI);
_this.ctx.globalAlpha = 1;
_this.ctx.strokeStyle = _this.strokeStyle;
if (_this.isFill) _this.ctx.fillStyle = _this.fillStyle;
_this.ctx.lineWidth = _this.lineWidth;
_this.ctx.closePath();
_this.isFill ? _this.ctx.fill() : _this.ctx.stroke();
_this.step = _this.step + 1;
if (_this.step < _this.canvasHistory.length - 1) {
_this.canvasHistory.length = _this.step; // 截断数组
}
_this.canvasHistory.push(_this.canvas.toDataURL());
_this.canvas.onmousemove = null;
}, 1);
}
}
// 绘制正方形
createRs(e, status, r1, r2) {
let _this = this;
let r;
if (status == "begin") {
console.log("onmousemove");
_this.canvas.onmousemove = function(e) {
_this.reset();
r = Math.abs(Math.min(e.layerX - r1, e.layerY - r2));
let rx = e.layerX - r1 < 0 ? -r : r;
let ry = e.layerY - r2 < 0 ? -r : r;
_this.ctx.beginPath();
_this.ctx.rect(r1, r2, rx, ry);
_this.ctx.globalAlpha = 0.5;
_this.ctx.strokeStyle = _this.strokeStyle;
if (_this.isFill) _this.ctx.fillStyle = _this.fillStyle;
_this.ctx.lineWidth = _this.lineWidth;
_this.ctx.closePath();
_this.isFill ? _this.ctx.fill() : _this.ctx.stroke();
};
} else if (status == "end") {
_this.rebroadcast();
let interval = setInterval(() => {
if (_this.loading) {
clearInterval(interval);
_this.loading = false;
} else {
return;
}
r = Math.abs(Math.min(e.layerX - r1, e.layerY - r2));
let rx = e.layerX - r1 < 0 ? -r : r;
let ry = e.layerY - r2 < 0 ? -r : r;
_this.ctx.beginPath();
_this.ctx.rect(r1, r2, rx, ry);
_this.ctx.globalAlpha = 1;
_this.ctx.strokeStyle = _this.strokeStyle;
if (_this.isFill) _this.ctx.fillStyle = _this.fillStyle;
_this.ctx.lineWidth = _this.lineWidth;
_this.ctx.closePath();
_this.isFill ? _this.ctx.fill() : _this.ctx.stroke();
_this.step = _this.step + 1;
if (_this.step < _this.canvasHistory.length - 1) {
_this.canvasHistory.length = _this.step; // 截断数组
}
_this.canvasHistory.push(_this.canvas.toDataURL());
_this.canvas.onmousemove = null;
}, 1);
}
}
// 绘制矩形
createR(e, status, r1, r2) {
let _this = this;
let r;
if (status == "begin") {
console.log("onmousemove");
_this.canvas.onmousemove = function(e) {
_this.reset();
// r = Math.abs(Math.min(e.layerX - r1, e.layerY - r2));
let rx = e.layerX - r1;
let ry = e.layerY - r2;
_this.ctx.beginPath();
_this.ctx.rect(r1, r2, rx, ry);
_this.ctx.globalAlpha = 0.5;
_this.ctx.strokeStyle = _this.strokeStyle;
if (_this.isFill) _this.ctx.fillStyle = _this.fillStyle;
_this.ctx.lineWidth = _this.lineWidth;
_this.ctx.closePath();
_this.isFill ? _this.ctx.fill() : _this.ctx.stroke();
};
} else if (status == "end") {
_this.rebroadcast();
let interval = setInterval(() => {
if (_this.loading) {
clearInterval(interval);
_this.loading = false;
} else {
return;
}
// r = Math.abs(Math.min(e.layerX - r1, e.layerY - r2));
let rx = e.layerX - r1;
let ry = e.layerY - r2;
_this.ctx.beginPath();
_this.ctx.rect(r1, r2, rx, ry);
_this.ctx.globalAlpha = 1;
_this.ctx.strokeStyle = _this.strokeStyle;
if (_this.isFill) _this.ctx.fillStyle = _this.fillStyle;
_this.ctx.lineWidth = _this.lineWidth;
_this.ctx.closePath();
_this.isFill ? _this.ctx.fill() : _this.ctx.stroke();
_this.step = _this.step + 1;
if (_this.step < _this.canvasHistory.length - 1) {
_this.canvasHistory.length = _this.step; // 截断数组
}
_this.canvasHistory.push(_this.canvas.toDataURL());
_this.canvas.onmousemove = null;
}, 1);
}
}
// 绘制多边形
createP(e, status, r1, r2) {
let _this = this;
if (status == "begin") {
// _this.canvas.onmousemove = function(e) {
// _this.reset(0.5);
// _this.ctx.beginPath();
// _this.ctx.arc(e.layerX, e.layerY, 5, 0, 2 * Math.PI);
// _this.ctx.fillStyle = _this.canvasBack;
// _this.ctx.closePath();
// _this.ctx.fill();
// };
} else if (status == "end") {
_this.reset();
_this.linePeak.push({ x: e.layerX, y: e.layerY });
_this.lineStep = _this.lineStep - 1;
_this.ctx.beginPath();
_this.ctx.strokeStyle = _this.strokeStyle;
_this.ctx.lineWidth = _this.lineWidth;
for (let i in _this.linePeak) {
let peak = _this.linePeak[i];
if (i == 0) {
_this.ctx.moveTo(peak.x, peak.y);
} else {
_this.ctx.lineTo(peak.x, peak.y);
}
_this.ctx.stroke();
}
if (_this.lineStep == 0) {
_this.reset();
_this.rebroadcast();
let interval = setInterval(() => {
if (_this.loading) {
clearInterval(interval);
_this.loading = false;
} else {
return;
}
_this.ctx.beginPath();
_this.ctx.strokeStyle = _this.strokeStyle;
_this.ctx.lineWidth = _this.lineWidth;
for (let i in _this.linePeak) {
let peak = _this.linePeak[i];
if (i == 0) {
_this.ctx.moveTo(peak.x, peak.y);
} else {
_this.ctx.lineTo(peak.x, peak.y);
}
}
_this.ctx.strokeStyle = _this.strokeStyle;
if (_this.isFill) _this.ctx.fillStyle = _this.fillStyle;
_this.ctx.lineWidth = _this.lineWidth;
_this.ctx.closePath();
_this.isFill ? _this.ctx.fill() : _this.ctx.stroke();
_this.resetP();
_this.step = _this.step + 1;
if (_this.step < _this.canvasHistory.length - 1) {
_this.canvasHistory.length = _this.step; // 截断数组
}
_this.canvasHistory.push(_this.canvas.toDataURL());
}, 1);
}
// _this.canvas.onmousemove = null;
}
}
// 绘制椭圆
createE(e, status, r1, r2) {
let _this = this;
let r, deg;
if (status == "begin") {
console.log("onmousemove");
// _this.ctx.moveTo(e.layerX, e.layerY);
_this.canvas.onmousemove = function(e) {
_this.reset();
r = Math.sqrt(
Math.pow(r1 - e.layerX, 2) + Math.pow(r2 - e.layerY, 2)
);
deg = _this.getAngle(r1, r2, e.layerX, e.layerY);
_this.ctx.beginPath();
_this.ctx.ellipse(r1, r2, r, r * _this.ellipseR, deg, 0, 2 * Math.PI);
_this.ctx.globalAlpha = 0.5;
_this.ctx.strokeStyle = _this.strokeStyle;
if (_this.isFill) _this.ctx.fillStyle = _this.fillStyle;
_this.ctx.lineWidth = _this.lineWidth;
_this.ctx.closePath();
_this.isFill ? _this.ctx.fill() : _this.ctx.stroke();
};
} else if (status == "end") {
_this.rebroadcast();
let interval = setInterval(() => {
if (_this.loading) {
clearInterval(interval);
_this.loading = false;
} else {
return;
}
r = Math.sqrt(
Math.pow(r1 - e.layerX, 2) + Math.pow(r2 - e.layerY, 2)
);
deg = _this.getAngle(r1, r2, e.layerX, e.layerY);
_this.ctx.beginPath();
_this.ctx.ellipse(r1, r2, r, r * _this.ellipseR, deg, 0, 2 * Math.PI);
_this.ctx.globalAlpha = 1;
_this.ctx.strokeStyle = _this.strokeStyle;
if (_this.isFill) _this.ctx.fillStyle = _this.fillStyle;
_this.ctx.lineWidth = _this.lineWidth;
_this.ctx.closePath();
_this.isFill ? _this.ctx.fill() : _this.ctx.stroke();
_this.step = _this.step + 1;
if (_this.step < _this.canvasHistory.length - 1) {
_this.canvasHistory.length = _this.step; // 截断数组
}
_this.canvasHistory.push(_this.canvas.toDataURL());
_this.canvas.onmousemove = null;
}, 1);
}
}
// 手机端
// 绘制线条
createLM(e, status) {
let _this = this;
if (status == "begin") {
_this.ctx.beginPath();
_this.ctx.moveTo(e.pageX, e.pageY);
_this.canvas.ontouchmove = function(e) {
console.log("ontouchmove");
let touch = e.changedTouches[0];
_this.ctx.lineTo(touch.pageX, touch.pageY);
_this.ctx.strokeStyle = _this.strokeStyle;
_this.ctx.lineWidth = _this.lineWidth;
_this.ctx.stroke();
};
} else if (status == "end") {
_this.ctx.closePath();
_this.step = _this.step + 1;
if (_this.step < _this.canvasHistory.length - 1) {
_this.canvasHistory.length = _this.step; // 截断数组
}
_this.canvasHistory.push(_this.canvas.toDataURL());
_this.canvas.ontouchmove = null;
}
}
// 绘制 圆
createCM(e, status, r1, r2) {
let _this = this;
let r;
if (status == "begin") {
console.log("ontouchmove");
// _this.ctx.moveTo(e.layerX, e.layerY);
_this.canvas.ontouchmove = function(e) {
_this.reset();
let touch = e.changedTouches[0];
r = Math.sqrt(
Math.pow(r1 - touch.pageX, 2) + Math.pow(r2 - touch.pageY, 2)
);
_this.ctx.beginPath();
_this.ctx.arc(r1, r2, r, 0, 2 * Math.PI);
_this.ctx.globalAlpha = 0.5;
_this.ctx.strokeStyle = _this.strokeStyle;
if (_this.isFill) _this.ctx.fillStyle = _this.fillStyle;
_this.ctx.lineWidth = _this.lineWidth;
_this.ctx.closePath();
_this.isFill ? _this.ctx.fill() : _this.ctx.stroke();
};
} else if (status == "end") {
_this.rebroadcast();
let interval = setInterval(() => {
if (_this.loading) {
clearInterval(interval);
_this.loading = false;
} else {
return;
}
let touch = e.changedTouches[0];
r = Math.sqrt(
Math.pow(r1 - touch.pageX, 2) + Math.pow(r2 - touch.pageY, 2)
);
_this.ctx.beginPath();
_this.ctx.arc(r1, r2, r, 0, 2 * Math.PI);
_this.ctx.globalAlpha = 1;
_this.ctx.strokeStyle = _this.strokeStyle;
if (_this.isFill) _this.ctx.fillStyle = _this.fillStyle;
_this.ctx.lineWidth = _this.lineWidth;
_this.ctx.closePath();
_this.isFill ? _this.ctx.fill() : _this.ctx.stroke();
_this.step = _this.step + 1;
if (_this.step < _this.canvasHistory.length - 1) {
_this.canvasHistory.length = _this.step; // 截断数组
}
_this.canvasHistory.push(_this.canvas.toDataURL());
_this.canvas.ontouchmove = null;
}, 1);
}
}
// 绘制正方形
createRsM(e, status, r1, r2) {
let _this = this;
let r;
if (status == "begin") {
_this.canvas.ontouchmove = function(e) {
console.log("ontouchmove");
_this.reset();
let touch = e.changedTouches[0];
r = Math.abs(Math.min(touch.pageX - r1, touch.pageY - r2));
let rx = touch.pageX - r1 < 0 ? -r : r;
let ry = touch.pageY - r2 < 0 ? -r : r;
_this.ctx.beginPath();
_this.ctx.rect(r1, r2, rx, ry);
_this.ctx.globalAlpha = 0.5;
_this.ctx.strokeStyle = _this.strokeStyle;
if (_this.isFill) _this.ctx.fillStyle = _this.fillStyle;
_this.ctx.lineWidth = _this.lineWidth;
_this.ctx.closePath();
_this.isFill ? _this.ctx.fill() : _this.ctx.stroke();
};
} else if (status == "end") {
_this.rebroadcast();
let interval = setInterval(() => {
if (_this.loading) {
clearInterval(interval);
_this.loading = false;
} else {
return;
}
let touch = e.changedTouches[0];
r = Math.abs(Math.min(touch.pageX - r1, touch.pageY - r2));
let rx = touch.pageX - r1 < 0 ? -r : r;
let ry = touch.pageY - r2 < 0 ? -r : r;
_this.ctx.beginPath();
_this.ctx.rect(r1, r2, rx, ry);
_this.ctx.globalAlpha = 1;
_this.ctx.strokeStyle = _this.strokeStyle;
if (_this.isFill) _this.ctx.fillStyle = _this.fillStyle;
_this.ctx.lineWidth = _this.lineWidth;
_this.ctx.closePath();
_this.isFill ? _this.ctx.fill() : _this.ctx.stroke();
_this.step = _this.step + 1;
if (_this.step < _this.canvasHistory.length - 1) {
_this.canvasHistory.length = _this.step; // 截断数组
}
_this.canvasHistory.push(_this.canvas.toDataURL());
_this.canvas.ontouchmove = null;
}, 1);
}
}
// 绘制矩形
createRM(e, status, r1, r2) {
let _this = this;
let r;
if (status == "begin") {
console.log("ontouchmove");
_this.canvas.ontouchmove = function(e) {
_this.reset();
// r = Math.abs(Math.min(e.layerX - r1, e.layerY - r2));
let touch = e.changedTouches[0];
let rx = touch.pageX - r1;
let ry = touch.pageY - r2;
_this.ctx.beginPath();
_this.ctx.rect(r1, r2, rx, ry);
_this.ctx.globalAlpha = 0.5;
_this.ctx.strokeStyle = _this.strokeStyle;
if (_this.isFill) _this.ctx.fillStyle = _this.fillStyle;
_this.ctx.lineWidth = _this.lineWidth;
_this.ctx.closePath();
_this.isFill ? _this.ctx.fill() : _this.ctx.stroke();
};
} else if (status == "end") {
_this.rebroadcast();
let interval = setInterval(() => {
if (_this.loading) {
clearInterval(interval);
_this.loading = false;
} else {
return;
}
// r = Math.abs(Math.min(e.layerX - r1, e.layerY - r2));
let touch = e.changedTouches[0];
let rx = touch.pageX - r1;
let ry = touch.pageY - r2;
_this.ctx.beginPath();
_this.ctx.rect(r1, r2, rx, ry);
_this.ctx.globalAlpha = 1;
_this.ctx.strokeStyle = _this.strokeStyle;
if (_this.isFill) _this.ctx.fillStyle = _this.fillStyle;
_this.ctx.lineWidth = _this.lineWidth;
_this.ctx.closePath();
_this.isFill ? _this.ctx.fill() : _this.ctx.stroke();
_this.step = _this.step + 1;
if (_this.step < _this.canvasHistory.length - 1) {
_this.canvasHistory.length = _this.step; // 截断数组
}
_this.canvasHistory.push(_this.canvas.toDataURL());
_this.canvas.onmousemove = null;
}, 1);
}
}
// 绘制多边形
createPM(e, status, r1, r2) {
let _this = this;
if (status == "begin") {
// _this.canvas.onmousemove = function(e) {
// _this.reset(0.5);
// _this.ctx.beginPath();
// _this.ctx.arc(e.layerX, e.layerY, 5, 0, 2 * Math.PI);
// _this.ctx.fillStyle = _this.canvasBack;
// _this.ctx.closePath();
// _this.ctx.fill();
// };
} else if (status == "end") {
_this.reset();
_this.linePeak.push({ x: e.pageX, y: e.pageY });
_this.lineStep = _this.lineStep - 1;
_this.ctx.beginPath();
_this.ctx.strokeStyle = _this.strokeStyle;
_this.ctx.lineWidth = _this.lineWidth;
for (let i in _this.linePeak) {
let peak = _this.linePeak[i];
if (i == 0) {
_this.ctx.moveTo(peak.x, peak.y);
} else {
_this.ctx.lineTo(peak.x, peak.y);
}
_this.ctx.stroke();
}
if (_this.lineStep == 0) {
_this.reset();
_this.rebroadcast();
let interval = setInterval(() => {
if (_this.loading) {
clearInterval(interval);
_this.loading = false;
} else {
return;
}
_this.ctx.beginPath();
_this.ctx.strokeStyle = _this.strokeStyle;
_this.ctx.lineWidth = _this.lineWidth;
for (let i in _this.linePeak) {
let peak = _this.linePeak[i];
if (i == 0) {
_this.ctx.moveTo(peak.x, peak.y);
} else {
_this.ctx.lineTo(peak.x, peak.y);
}
}
_this.ctx.strokeStyle = _this.strokeStyle;
if (_this.isFill) _this.ctx.fillStyle = _this.fillStyle;
_this.ctx.lineWidth = _this.lineWidth;
_this.ctx.closePath();
_this.isFill ? _this.ctx.fill() : _this.ctx.stroke();
_this.resetP();
_this.step = _this.step + 1;
if (_this.step < _this.canvasHistory.length - 1) {
_this.canvasHistory.length = _this.step; // 截断数组
}
_this.canvasHistory.push(_this.canvas.toDataURL());
}, 1);
}
// _this.canvas.onmousemove = null;
}
}
// 绘制椭圆
createEM(e, status, r1, r2) {
let _this = this;
let r, deg;
if (status == "begin") {
console.log("ontouchmove");
// _this.ctx.moveTo(e.layerX, e.layerY);
_this.canvas.ontouchmove = function(e) {
_this.reset();
let touch = e.changedTouches[0];
r = Math.sqrt(
Math.pow(r1 - touch.pageX, 2) + Math.pow(r2 - touch.pageY, 2)
);
deg = _this.getAngle(r1, r2, touch.pageX, touch.pageY);
_this.ctx.beginPath();
_this.ctx.ellipse(r1, r2, r, r * _this.ellipseR, deg, 0, 2 * Math.PI);
_this.ctx.globalAlpha = 0.5;
_this.ctx.strokeStyle = _this.strokeStyle;
if (_this.isFill) _this.ctx.fillStyle = _this.fillStyle;
_this.ctx.lineWidth = _this.lineWidth;
_this.ctx.closePath();
_this.isFill ? _this.ctx.fill() : _this.ctx.stroke();
};
} else if (status == "end") {
_this.rebroadcast();
let interval = setInterval(() => {
if (_this.loading) {
clearInterval(interval);
_this.loading = false;
} else {
return;
}
r = Math.sqrt(Math.pow(r1 - e.pageX, 2) + Math.pow(r2 - e.pageY, 2));
deg = _this.getAngle(r1, r2, e.pageX, e.pageY);
_this.ctx.beginPath();
_this.ctx.ellipse(r1, r2, r, r * _this.ellipseR, deg, 0, 2 * Math.PI);
_this.ctx.globalAlpha = 1;
_this.ctx.strokeStyle = _this.strokeStyle;
if (_this.isFill) _this.ctx.fillStyle = _this.fillStyle;
_this.ctx.lineWidth = _this.lineWidth;
_this.ctx.closePath();
_this.isFill ? _this.ctx.fill() : _this.ctx.stroke();
_this.step = _this.step + 1;
if (_this.step < _this.canvasHistory.length - 1) {
_this.canvasHistory.length = _this.step; // 截断数组
}
_this.canvasHistory.push(_this.canvas.toDataURL());
_this.canvas.onmousemove = null;
}, 1);
}
}
