vue3+ts项目模拟批注
一、项目需求：
移动端：实现点击“批注”，随手指绘制出线条，线条封闭之后，视为圈记成功，进而输入评论内容——批注；
二、实现思路：
1.“批注”按钮控制canvas画布显示，输入框回车确认代表完成此次批注，画布隐藏；
2.获取touch的坐标，将所有获取到的（x,y）坐标存储至lineList
3.线条是否满足闭合条件：
①线条只是一个点，即lineList.length为1，是不满足条件的，手指松开瞬间之后清空画布，并提示；
②线条没有相交的区域，没有即为不满足，清空画布，并提示；
（注意：这里不能单纯的判断lineList中是否有坐标一致的点，线条看上去是连着的，实际上是有无数小点组成，每个小点之间是有间隙的）
三、重点部分
1.segmentsIntr 函数：判断两条线段是否相交；
2.在isClose函数中进行线条是否满足条件判断；
3.handleReset：重置canvas与视口间距，主要解决在浏览器滚动到不同程度之后，画布中touch的位置与实际获取位置不符合，存在偏差的问题；
4.水平与垂直方向缩放因子的获取：不同设备缩放因子不一致，避免在一个设备绘制之后，另一设备查看时存在较大偏差；
四、canvas部分的实现代码
<template>
<div class="postil">
<canvas ref="postil" class="canvas" id="canvas" @touchstart="drawStart" @touchmove="drawing" @touchend="drawEnd">
你的浏览器不支持canvas，请升级浏览器.浏览器不支持
</canvas>
</div>
</template>
<script setup lang="ts">
import { drNotify } from '@/utils/vantHint';
// props类型
interface Props {
// 画布宽
canvasWidth?: number,
// 画布宽
canvasHeight?: number,
//canvas 背景色
canvasBackground: string,
//线条颜色
lineColor: string,
//线条宽度
lineWidth: number,
//线条两端形状
lineRound: string,
}
// 设置props默认
const props = withDefaults(defineProps<Props>(), {
// 宽高需要默认为日志内容主体宽高
canvasWidth: document.documentElement.clientWidth,
canvasHeight: document.documentElement.clientHeight,
canvasBackground: 'transparent',
lineColor: '#4979E7',
lineWidth: 3,
lineRound: 'round',
})
console.log(props, 'props');
let direction = shallowRef(false); // 屏幕方向 true：横屏 false：竖屏
let el = ref<any>(null); // canvas dom
let postil = ref(null); // 绑定ref为postil
let ctx = reactive<any>({}); // canvas内容
let startX = shallowRef(0); // 绘制开始pageX
let startY = shallowRef(0); // 绘制开始pageY
let endX = shallowRef(0); // 绘制结束pageX
let endY = shallowRef(0); // 绘制结束pageY
const gap = shallowRef(20); // 两点差距值
let lineList = reactive([]); // 绘制线条的点集合
// canvas 距离视口x,y
const gapCanvas = reactive({
x: 0,
y: 0,
// 缩放
scaleX: 1,
scaleY: 1,
})
// 判断当前手机为竖屏还是横屏
const initPhoneDirection = () => {
drawLine();
// window.addEventListener(
// "onorientationchange" in window ? "oorientationchange" : "resize",
// () => {
// console.log(window.orientation, 'window.orientation');
// if (window.orientation === 180 || window.orientation === 0) {
// direction.value = false;
// drawLine();
// console.log(direction.value, '竖屏');
// }
// if (window.orientation === 90 || window.orientation === -90) {
// direction.value = true;
// console.log(direction.value, '横屏');
// drawLine();
// }
// },
// false
// );
}
// 添加绘制线
const drawLine = () => {
document.addEventListener("touchmove", (e) => {
e.preventDefault()
}, {
passive: false,
});
el.value = postil.value;
initCanvas();
}
// 初始化canvas配置
const initCanvas = () => {
el.value.width = props.canvasWidth;
el.value.height = props.canvasHeight;
ctx = el.value.getContext('2d');
setCanvas();
}
// canvas配置
const setCanvas = () => {
ctx.fillStyle = props.canvasBackground;
// 绘制矩形
if (direction.value) {
// 横屏
// 立即对当前矩形进行fill填充
ctx.fillRect(0, 0, props.canvasHeight, props.canvasWidth)
} else {
// 竖屏
ctx.fillRect(0, 0, props.canvasWidth, props.canvasHeight)
}
// 设置线条颜色
ctx.strokeStyle = props.lineColor;
// 设置线条宽度
ctx.lineWidth = props.lineWidth;
// 设置线条两端形状
ctx.lineCap = props.lineRound;
}
// 开始绘制
const drawStart = (e: any) => {
console.log(gapCanvas.x, gapCanvas.y, '画布距离视口的距离');
// clearSign();
lineList = [];
startX.value = (e.changedTouches[0].pageX - gapCanvas.x) * gapCanvas.scaleX;
startY.value = (e.changedTouches[0].pageY - gapCanvas.y) * gapCanvas.scaleY;
// 开始路径：核心的作用是将 不同绘制的形状进行隔离
ctx.beginPath();
//绘制起点
ctx.moveTo((e.changedTouches[0].pageX - gapCanvas.x) * gapCanvas.scaleX, (e.changedTouches[0].pageY - gapCanvas.y) * gapCanvas.scaleY)
drawing(e);
}
// 绘制过程
const drawing = (e: any) => {
lineList.push({ x: (e.changedTouches[0].pageX - gapCanvas.x) * gapCanvas.scaleX, y: (e.changedTouches[0].pageY - gapCanvas.y) * gapCanvas.scaleY })
// 绘制直线：绘制一条直线至起点或者上一个线头点
ctx.lineTo((e.changedTouches[0].pageX - gapCanvas.x) * gapCanvas.scaleX, (e.changedTouches[0].pageY - gapCanvas.y) * gapCanvas.scaleY);
// 描边：根据路径绘制线
ctx.stroke();
}
// 绘制结束
const drawEnd = (e: any) => {
endX.value = (e.changedTouches[0].pageX - gapCanvas.x) * gapCanvas.scaleX;
endY.value = (e.changedTouches[0].pageY - gapCanvas.y) * gapCanvas.scaleY;
// 闭合路径：自动把最后的线头和开始的线头连在一起
ctx.closePath();
isClose();
}
// 重置
const clearSign = () => {
initCanvas();
}
interface Emits {
(event: 'drawPie', bool: any, array?: any): void
}
const $emits = defineEmits<Emits>();
// 提交
const saveSign = () => {
// toDataURL：把canvas绘制的内容输出成base64内容
const imageBase64 = el.value.toDataURL();
// 调用父组件写批注事件
$emits('drawPie', true, imageBase64)
}
// 判断两条线段是否相交
const segmentsIntr = (a: any, b: any, c: any, d: any) => {
// 三角形abc 面积的2倍
var area_abc = (a.x - c.x) * (b.y - c.y) - (a.y - c.y) * (b.x - c.x);
// 三角形abd 面积的2倍
var area_abd = (a.x - d.x) * (b.y - d.y) - (a.y - d.y) * (b.x - d.x);
// 面积符号相同则两点在线段同侧,不相交 (对点在线段上的情况,本例当作不相交处理);
if (area_abc * area_abd >= 0) {
return false;
}
// 三角形cda 面积的2倍
var area_cda = (c.x - a.x) * (d.y - a.y) - (c.y - a.y) * (d.x - a.x);
// 三角形cdb 面积的2倍
// 注意: 这里有一个小优化.不需要再用公式计算面积,而是通过已知的三个面积加减得出.
var area_cdb = area_cda + area_abc - area_abd;
if (area_cda * area_cdb >= 0) {
return false;
}
//计算交点坐标
var t = area_cda / (area_abd - area_abc);
var dx = t * (b.x - a.x),
dy = t * (b.y - a.y);
return { x: a.x + dx, y: a.y + dy };
}
/** 判断绘制的是否满足封闭条件:
1.开始与结束点距离小于等于20px
2.绘制的点集合大于1（不止一个点）
3.线条相交，形成一个闭合区间
*/
const isClose = () => {
// ctx.save() 保存当前环境的状态 可以把当前绘制环境进行保存到缓存中。
const addX = startX.value + gap.value;
const loseX = startX.value - gap.value;
const addY = startY.value + gap.value;
const loseY = startY.value - gap.value;
const satifyX = (endX.value < addX || endX.value == addX) && (endX.value > loseX || endX.value == loseX);
const satifyY = (endY.value < addY || endY.value == addY) && (endY.value > loseY || endY.value == loseY);
let count = 0;
// 线条的交点
for (var i = 0; i < lineList.length - 1; i++) {
for (var j = i + 1; j < lineList.length - 1; j++) {
var crossoverPoint = segmentsIntr(lineList[i], lineList[i + 1], lineList[j], lineList[j + 1])
if (crossoverPoint != false) {
// 有交点
count++;
}
}
}
if (((satifyX && satifyY) && lineList.length > 1) || count) {
console.log('符合条件');
saveSign();
} else {
drNotify('请将线条首尾相连!', 'danger')
console.log('不符合条件');
clearSign();
}
}
// 重置canvas与视口间距
const handleReset = () => {
// DOM元素到浏览器可视范围的距离
const rect = el.value.getBoundingClientRect();
gapCanvas.x = rect.left;
gapCanvas.y = rect.top;
}
// 监听滚动条
const handleScroll = () => {
window.addEventListener('scroll', async () => {
await handleReset();
}, true)
}
onMounted(() => {
initPhoneDirection();
handleScroll();
handleReset();
let style = window.getComputedStyle(el.value, null);
let cssWidth = parseFloat(style["width"]);
let cssHeight = parseFloat(style["height"]);
gapCanvas.scaleX = el.value.width / cssWidth; // 水平方向的缩放因子
gapCanvas.scaleY = el.value.height / cssHeight; // 垂直方向的缩放因子
console.log(gapCanvas.scaleX, gapCanvas.scaleY, '缩放');
})
onBeforeUnmount(() => {
window.removeEventListener('scroll', () => { })
})
</script>
<style lang="scss">
.postil {
width: 100%;
height: 100%;
background-color: rgba(250, 235, 215, 0.382);
.canvas {
width: 100%;
height: 100%;
display: block;
}
}
</style>
五、思考
1. 可以实现只存canvas中的路径吗？或是存储绘制出来的线？
理想效果：
回显的时候，通过点击不同的线条能够切换展示不同的评论
现状：
canvas转为base64存储的，存储的为整个画布，多条线段展示即是多个画布大小的图片叠加，并不能准确获取到对应线条
暂时没有处理思路，欢迎提供解决办法！！！！！！！感谢
