先上效果图
（gif 图， 应该是可以看到的吧）
忘记解释了，
现在绘制的下面之所以是白色的，是因为录gif的时候 我监控没打开，所以监控没显示出来，用图片也是可以的
层级是这样的，
然后我就直接上代码了，我写了大量的注释，要是看不懂的，我再解释
我是一个白菜，里面还是有部分搞不太懂，建议可以看一下参考文献第一个链接，问问大佬，
这个是DialogAreaDash.vue的
<template>
<div>
<el-dialog
title="区域划线"
:close-on-click-modal="false"
:visible.sync="dialogFormVisible"
:width="D_DIALOG_SIZE_BIG"
>
<div
style="
width: 100%;
height: 570px;
display: flex;
justify-content: space-around;
"
>
<div class="operation" style="width: 400px">
<div class="intrusion">
<div style="line-height: 30px">入侵区域数量</div>
<el-select
v-model="intrusion_num"
@change="intrusionNumChange"
placeholder="请选择"
>
<el-option
v-for="item in intrusion_options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
<div
class="intrusion_item"
v-show="operation_arr.length != 0"
v-for="(item, index) in operation_arr"
:key="index"
>
<div class="item_title">{{ "入侵区域" + item.order_num }}</div>
<div class="item_row">
<span style="line-height: 35px">入侵时间(秒)</span>
<div class="block">
<el-slider v-model="item.timeThreshold" :max="10" show-input>
</el-slider>
</div>
</div>
<div class="item_row">
<span style="line-height: 35px">灵敏度</span>
<div class="block">
<el-slider v-model="item.sensitivityLevel" show-input>
</el-slider>
</div>
</div>
</div>
</div>
<div class="areaDash">
<canvasDraw
ref="canvasDrawRef"
style="height: 100%; width: 100%"
@finish="handleDrawFinish"
:single="true"
:form="form"
:limit="4"
/>
<div class="dialog-footer" style="margin-top: 10px">
<el-select
v-model="Draw_item"
@change="DrawNumChange"
placeholder="请选择"
class="DrawStyle"
value-key="order_num"
>
<el-option
v-for="item in operation_arr"
:key="item.order_num"
:label="'入侵区域' + item.order_num"
:value="item"
>
</el-option>
</el-select>
<el-button plain v-show="isopen" @click="DrawArea(false)"
>绘制区域</el-button
>
<el-button plain v-show="!isopen" @click="DrawArea(true)"
>取消</el-button
>
<el-button plain v-show="!isopen" @click="resetForm"
>重 置</el-button
>
<el-button type="primary" v-show="!isopen" @click="submitForm"
>确 定</el-button
>
</div>
</div>
</div>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="configRegion">配置区域围栏</el-button>
<el-button @click="dialogFormVisible = false">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import config from "../config";
import dialogControlorMixin from "@vcom/mixins/dialogControlorMixin";
import entMixin from "@vcom/mixins/entMixin";
import canvasDraw from "./components/index.vue";
export default {
name: "DialogAreaDash",
mixins: [dialogControlorMixin, entMixin],
components: { canvasDraw },
data() {
return {
config: config,
form: {},
formLabelWidth: "120px",
intrusion_num: 0,
intrusion_options: [
{ label: 1, value: 1 },
{ label: 2, value: 2 },
{ label: 3, value: 3 },
{ label: 4, value: 4 },
],
operation_arr: [],
isopen: true, // 为true时画板不可点击
Draw_item: {}, // 当前选中的绘画区域
endPoint: [], //绘画结束时的点位
};
},
methods: {
// 注册表单数据
async init() {
if (this.$refs["canvasDrawRef"]) {
this.$refs["canvasDrawRef"].reset();
this.$Bus.$emit("CHANGE_OPEN", true);
}
// 不可直接关联store
this.form = this._.cloneDeep(
this.$store.state[config.MODULE_NAME].dialogFormData
);
// 发起请求
const res = await this.$api.ballVideo2.queryFences({
device_uuid: this.form.uuid,
});
if (res.data && res.data.length != 0) {
let allData = res.data;
allData.sort(function (a, b) {
// a - b 是升序
return a.order_num - b.order_num;
});
for (let i = 0; i < allData.length; i++) {
if (allData[allData.length - 1 - i].is_enabled == 1) {
// 倒序表明应用了几个
for (let j = 0; j < allData.length - i; j++) {
this.operation_arr.push({
timeThreshold: allData[j].timeThreshold,
sensitivityLevel: allData[j].sensitivityLevel,
order_num: allData[j].order_num,
is_enabled: allData[j].is_enabled,
fenceDetailDTOS:allData[j].fenceDetailDTOS.map(e=>{
return {
order_num: e.order_num,
x: ( +e.x)/2,
y: ( +e.y)/2,
}
})
});
}
this.operation_arr.forEach((item) => {
item.is_enabled == 1;
item.fenceDetailDTOS.sort(function (a, b) {
// a - b 是升序
return a.order_num - b.order_num;
});
this.$Bus.$emit("START_DRAWING", item);
});
this.intrusion_num = allData.length - i;
break;
}
}
}
},
DrawArea(e) {
// 绘制区域
if (e == false) {
if (!(this.Draw_item && this.Draw_item.order_num)) {
this.$alert("请选择入侵区域", "提示", {
confirmButtonText: "确定",
});
return;
}
this.endPoint = this.Draw_item.fenceDetailDTOS;
}
this.isopen = e;
this.$Bus.$emit("CHANGE_OPEN", e);
// 取消
if (e == true) {
this.$refs["canvasDrawRef"].reset();
this.$Bus.$emit("CHANGE_OPEN", e);
this.$Bus.$emit("START_DRAWING", this.Draw_item);
}
},
// 重置
resetForm() {
this.$refs["canvasDrawRef"].reset();
},
// 确定
submitForm() {
console.log(this.endPoint);
this.isopen = true;
this.$Bus.$emit("CHANGE_OPEN", true);
this.endPoint.forEach((ele, index) => {
ele.order_num = index + 1;
});
this.operation_arr[this.Draw_item.order_num - 1].fenceDetailDTOS =
this.endPoint;
this.$Bus.$emit(
"START_DRAWING",
this.operation_arr[this.Draw_item.order_num - 1]
);
},
// 最后的确定，配置区域围栏
async configRegion() {
if (this.operation_arr.length == 0) {
this.$alert("至少配置一个区域", "提示", {
confirmButtonText: "确定",
});
return;
}
this.operation_arr.forEach((item) => {
item.fenceDetailDTOS.forEach((ele) => {
ele.x = ele.x * 2;
ele.y = ele.y * 2;
});
});
console.log(this.operation_arr);
let sendData = {
device_uuid: this.form.uuid,
fenceDTOS: this.operation_arr,
};
// 发起请求
const res = await this.$api.ballVideo2.configFences(sendData);
this.dialogFormVisible = false;
},
// 绘画最后一笔结束时的数据
handleDrawFinish(e) {
console.log(this.endPoint);
this.endPoint = e;
},
// 选中 绘画的入侵区域 的改变
DrawNumChange(item) {
if (item) {
let drawArr = item;
console.log(drawArr);
this.$refs["canvasDrawRef"].reset();
this.endPoint = [];
this.isopen = true;
this.$Bus.$emit("CHANGE_OPEN", true);
if (drawArr.fenceDetailDTOS && drawArr.fenceDetailDTOS.length != 0) {
// drawArr.fenceDetailDTOS.sort(function (a, b) {
// // a - b 是升序
// return a.order_num - b.order_num;
// });
this.$Bus.$emit("START_DRAWING", drawArr);
}
}
},
// 入侵区域数量的改动
intrusionNumChange(num) {
if (this.operation_arr.length >= num) {
this.operation_arr.length = num;
} else {
for (let i = this.operation_arr.length; i < num; i++) {
this.operation_arr.push({
order_num: +i + 1,
is_enabled: 1,
timeThreshold: 1,
sensitivityLevel: 100,
fenceDetailDTOS: [
{ order_num: 1, x: 375.5, y: 48.703125 },
{ order_num: 2, x: 376.5, y: 353.703125 },
{ order_num: 3, x: 54.5, y: 351.703125 },
{ order_num: 4, x: 53.5, y: 49.703125 },
],
});
}
}
this.$refs["canvasDrawRef"].reset();
this.$Bus.$emit("CHANGE_OPEN", true);
for (let i = 0; i < this.operation_arr.length; i++) {
this.$Bus.$emit("START_DRAWING", this.operation_arr[i]);
}
this.Draw_item = {}
},
// 页面销毁
copDestroy() {
this.isopen = true;
this.operation_arr = [];
this.Draw_item = {};
this.intrusion_num = 0;
},
},
beforeDestroy() {
this.$Bus.$off("CHANGE_OPEN");
this.$Bus.$off("START_DRAWING");
},
};
</script>
<style>
.intrusion {
display: flex;
justify-content: space-between;
}
.item_title {
background-color: aliceblue;
margin-top: 10px;
}
.item_row {
display: flex;
justify-content: space-between;
}
.block .show-input {
width: 55% !important;
margin-right: 250px !important;
}
.block .el-slider__input {
width: 100px !important;
}
.block .el-slider__input .el-input {
width: 100% !important;
}
.areaDash {
width: 500px;
height: 500px;
}
.DrawStyle {
width: 150px !important;
}
</style>对了，解释一下，我这个里面多排序的部分，是因为划线你肯定要有顺序，因为我从接口拿到的顺序是打乱的，所以我按照升序 整理了一下。
index的
<template>
<div>
<div class="canvas-box solid" ref="canvasBox">
<!-- <img
src="@/assets/bg1.png"
style="
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
object-fit: fill;
"
/> -->
<video
v-if="videoUrl"
style="
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
object-fit: fill;
"
:src="videoUrl"
:autoplay="true"
></video>
<!-- :controls="true" -->
<!--用来和鼠标进行交互操作的canvas-->
<canvas ref="canvas"></canvas>
<!--存储已生成的点线，避免被清空-->
<canvas
ref="canvasSave"
@click="handleCanvasSaveClick"
@mousemove="handleCanvasSaveMove"
@mouseup="handleCanvasMouseUp"
@mousedown="handleCanvasMouseDown"
></canvas>
<div
style="width: 100%; height: 100%; position: absolute; top: 0; left: 0"
v-show="open && single"
></div>
</div>
</div>
</template>
<script>
import FlvCop from "@/viewsCommon/components/FlvCop.vue";
export default {
name: "DialogAreaDashIndex",
data() {
return {
coincidentDistance: 10, // 重合距离
oIndex: -1, //判断鼠标是否移动到起始点处，-1为否，1为是
pointArr: [], //存放坐标的数组
MovePointArr: [], //存放 拖拽移动时 坐标的数组
pointX: "",
pointY: "",
ctxSave: "",
canSave: "",
ctx: "",
can: "",
lineColor: "rgba(64, 158, 255, 1)",
open: true,
completedDraw: false, // 是否已经完成了绘图
clickMove: false, //表明 正在拖拽的状态
videoUrl: "",
};
},
components: { FlvCop },
props: {
// background:{
// type: [String],
// default: "",
// },
single: {
type: [Boolean],
default: true,
},
form: {
type: [Object],
default: {},
},
limit: {
type: [Number],
default: 4,
},
},
watch: {
form: {
handler: function () {
this.getVideo();
},
deep: true,
},
},
beforeMount() {
this.$Bus.$on("CHANGE_OPEN", (e) => {
this.open = e;
if (e == false) {
// 开始绘制
this.completedDraw = true;
}
});
this.$Bus.$on("START_DRAWING", (area) => {
this.ctx.beginPath();
this.ctx.moveTo(area.fenceDetailDTOS[0].x, area.fenceDetailDTOS[0].y);
for (var i = 1; i < area.fenceDetailDTOS.length; i++) {
this.ctx.lineTo(area.fenceDetailDTOS[i].x, area.fenceDetailDTOS[i].y);
}
this.ctx.lineTo(area.fenceDetailDTOS[0].x, area.fenceDetailDTOS[0].y);
this.ctx.fillStyle = "rgba(161,195,255,1)"; //填充颜色
this.ctx.fill(); //填充
this.ctx.stroke(); //绘制
this.ctx.font = "20px 宋体";
this.ctx.fillStyle = "rgb(255,165,0)";
let heavyHeart = this.centerPoint(area.fenceDetailDTOS);
// y向下为正
this.ctx.fillText(
"入侵区域 " + area.order_num,
heavyHeart.x - 40,
heavyHeart.y
// 随便找两个不相邻的点的中点好了
// (area.fenceDetailDTOS[0].x + area.fenceDetailDTOS[2].x) / 2,
// (area.fenceDetailDTOS[0].y + area.fenceDetailDTOS[2].y) / 2
);
this.pointArr = area.fenceDetailDTOS
});
},
methods: {
// 计算向量叉乘
crossMul(v1, v2) {
return v1.x * v2.y - v1.y * v2.x;
},
// 判断两条线段是否相交
checkCross(p1, p2, p3, p4) {
let v1 = { x: p1.x - p3.x, y: p1.y - p3.y },
v2 = { x: p2.x - p3.x, y: p2.y - p3.y },
v3 = { x: p4.x - p3.x, y: p4.y - p3.y },
v = this.crossMul(v1, v3) * this.crossMul(v2, v3);
v1 = { x: p3.x - p1.x, y: p3.y - p1.y };
v2 = { x: p4.x - p1.x, y: p4.y - p1.y };
v3 = { x: p2.x - p1.x, y: p2.y - p1.y };
return v <= 0 && this.crossMul(v1, v3) * this.crossMul(v2, v3) <= 0
? true
: false;
},
// 判断点是否在多边形内
checkPP(point, polygon) {
let p1, p2, p3, p4;
p1 = point;
p2 = { x: -100, y: point.y };
let count = 0;
// 对每条边都和射线作对比
for (let i = 0; i < polygon.length - 1; i++) {
p3 = polygon[i];
p4 = polygon[i + 1];
if (this.checkCross(p1, p2, p3, p4) == true) {
count++;
}
}
p3 = polygon[polygon.length - 1];
p4 = polygon[0];
if (this.checkCross(p1, p2, p3, p4) == true) {
count++;
}
// 如果为偶数 说明在多边形外面，如果为奇数，说明在多边形内部
return count % 2 == 0 ? false : true;
},
// 通过多边形的各点位获得重心
centerPoint(pointArr) {
let X = 0,
Y = 0;
for (let i = 0; i < pointArr.length; i++) {
X = X + +pointArr[i].x;
Y = Y + +pointArr[i].y;
}
X = X / pointArr.length;
Y = Y / pointArr.length;
return { x: X, y: Y };
},
// 监控
async getVideo() {
// 发起请求
// const res = await this.$api.ballVideo2.live({
// // device_uuid: "937adeb238944162b23961d0d216c962",
// device_uuid: this.form.uuid,
// });
// if (res && res.data) {
// this.videoUrl = res.data.fmp4;
// }
},
initCanvas() {
this.can = this.$refs["canvas"];
this.can.width = this.$refs["canvasBox"].clientWidth;
this.can.height = this.$refs["canvasBox"].clientHeight;
// console.log(can.width, can.height);
this.ctx = this.can.getContext("2d");
this.ctx.strokeStyle = this.lineColor; //线条颜色
this.ctx.fillStyle = "rgba(64, 158, 255,0.1)"; //填充颜色
this.ctx.lineWidth = 4; //线条粗细
this.ctx.globalAlpha = 0.7; //半透明
this.canSave = this.$refs["canvasSave"];
this.canSave.width = this.$refs["canvasBox"].clientWidth;
this.canSave.height = this.$refs["canvasBox"].clientHeight;
this.ctxSave = this.canSave.getContext("2d");
this.ctxSave.strokeStyle = this.lineColor; //线条颜色
this.ctxSave.fillStyle = "rgba(64, 158, 255,0.1)"; //填充颜色
this.ctxSave.lineWidth = 4; //线条粗细
this.ctxSave.globalAlpha = 0.7; //半透明
// console.log(can);
// console.log(canSave);
},
handleCanvasMouseUp() {
if (this.clickMove) {
this.clickMove = false;
this.pointArr = this.MovePointArr;
this.$emit("finish", this.pointArr);
}
},
handleCanvasMouseDown(e) {
if (e && e.layerX) {
if (
this.completedDraw &&
this.checkPP(
{
x: e.offsetX == undefined ? e.layerX : e.offsetX,
y: e.offsetY == undefined ? e.layerY : e.offsetY,
},
this.pointArr
)
) {
this.clickMove = true;
this.pointX = e.offsetX;
this.pointY = e.offsetY;
}
}
},
handleCanvasSaveClick(e) {
if (this.completedDraw) {
return;
}
if (e.layerX) {
this.pointX = e.offsetX == undefined ? e.layerX : e.offsetX;
this.pointY = e.offsetY == undefined ? e.layerY : e.offsetY;
var piX, piY;
if (this.oIndex > 0 && this.pointArr.length > 0) {
piX = this.pointArr[0].x;
piY = this.pointArr[0].y;
//画点
this.makearc(
this.ctx,
piX,
piY,
this.GetRandomNum(2, 2),
0,
180,
this.lineColor
);
this.pointArr.push({ x: piX, y: piY });
if (this.isExistIntersection()) {
this.$alert("存在交叉线段，请重新绘制", "提示", {
confirmButtonText: "确定",
});
this.revoke();
return;
}
this.canvasSave(this.pointArr); //保存点线同步到另一个canvas
this.saveCanvas(); //生成画布
} else {
piX = this.pointX;
piY = this.pointY;
this.makearc(
this.ctx,
piX,
piY,
this.GetRandomNum(2, 2),
0,
180,
this.lineColor
);
this.pointArr.push({ x: piX, y: piY });
if (this.isExistIntersection()) {
this.$alert("存在交叉线段，请重新绘制", "提示", {
confirmButtonText: "确定",
});
this.revoke();
return;
}
this.canvasSave(this.pointArr); //保存点线同步到另一个canvas
}
}
},
handleCanvasSaveMove(e) {
if (this.completedDraw) {
// 分成两个if是因为完成绘图后鼠标移动不产生线条
if (this.clickMove) {
let flag = true;
// 多边形不可出画板
for (let i = 0; i < this.pointArr.length; i++) {
if (
this.pointArr[i].x + e.offsetX - this.pointX >= this.can.width ||
this.pointArr[i].x + e.offsetX - this.pointX <= 0 ||
this.pointArr[i].y + e.offsetY - this.pointY >= this.can.height ||
this.pointArr[i].y + e.offsetY - this.pointY <= 0
) {
flag = false;
this.handleCanvasMouseUp()
}
}
if (flag == false) return;
// 表示点击之后移动
this.MovePointArr = this.pointArr.map((ele) => {
return {
x: ele.x + e.offsetX - this.pointX,
y: ele.y + e.offsetY - this.pointY,
};
});
// // 清空画布
this.ctx.clearRect(0, 0, this.can.width, this.can.height);
this.ctxSave.clearRect(0, 0, this.canSave.width, this.canSave.height);
// /*开始绘制*/
this.ctx.beginPath();
this.ctx.moveTo(this.MovePointArr[0].x, this.MovePointArr[0].y);
if (this.MovePointArr.length > 1) {
for (var i = 1; i < this.MovePointArr.length; i++) {
this.ctx.lineTo(this.MovePointArr[i].x, this.MovePointArr[i].y);
}
}
this.ctx.lineTo(this.MovePointArr[0].x, this.MovePointArr[0].y);
this.ctx.fillStyle = "rgba(161,195,255,1)"; //填充颜色
this.ctx.fill(); //填充
this.ctx.stroke(); //绘制
}
return;
}
if (e.offsetX || e.layerX) {
this.pointX = e.offsetX == undefined ? e.layerX : e.offsetX;
this.pointY = e.offsetY == undefined ? e.layerY : e.offsetY;
var piX, piY;
/*清空画布*/
this.ctx.clearRect(0, 0, this.can.width, this.can.height);
/*鼠标下跟随的圆点*/
this.makearc(
this.ctx,
this.pointX,
this.pointY,
this.GetRandomNum(4, 4),
0,
180,
this.lineColor
);
if (this.pointArr.length > 0) {
if (
this.pointX > this.pointArr[0].x - this.coincidentDistance &&
this.pointX < this.pointArr[0].x + this.coincidentDistance &&
this.pointY > this.pointArr[0].y - this.coincidentDistance &&
this.pointY < this.pointArr[0].y + this.coincidentDistance
) {
if (this.pointArr.length > 1) {
piX = this.pointArr[0].x;
piY = this.pointArr[0].y;
// console.log(piX, piY);
this.ctx.clearRect(0, 0, this.can.width, this.can.height);
this.makearc(
this.ctx,
piX,
piY,
this.GetRandomNum(4, 4),
0,
180,
this.lineColor
);
this.oIndex = 1;
}
} else {
piX = this.pointX;
piY = this.pointY;
this.oIndex = -1;
}
/*开始绘制*/
this.ctx.beginPath();
this.ctx.moveTo(this.pointArr[0].x, this.pointArr[0].y);
if (this.pointArr.length > 1) {
for (var i = 1; i < this.pointArr.length; i++) {
this.ctx.lineTo(this.pointArr[i].x, this.pointArr[i].y);
}
}
this.ctx.lineTo(piX, piY);
this.ctx.fillStyle = "rgba(161,195,255,1)"; //填充颜色
this.ctx.fill(); //填充
this.ctx.stroke(); //绘制
}
}
},
// 存储已生成的点线
canvasSave(pointArr) {
this.ctxSave.clearRect(0, 0, this.ctxSave.width, this.ctxSave.height);
this.ctxSave.beginPath();
if (pointArr.length > 1) {
this.ctxSave.moveTo(pointArr[0].x, pointArr[0].y);
for (var i = 1; i < pointArr.length; i++) {
this.ctxSave.lineTo(pointArr[i].x, pointArr[i].y);
this.ctxSave.fillStyle = "rgba(161,195,255,1)"; //填充颜色
//ctxSave.fill();
this.ctxSave.stroke(); //绘制
}
this.ctxSave.closePath();
}
},
/*生成画布 结束绘画*/
saveCanvas() {
if (this.pointArr.length <= 3) {
this.$alert("检查区域至少为三边形，请重新绘制", "提示", {
confirmButtonText: "确定",
});
this.revoke();
return;
}
this.ctx.clearRect(0, 0, this.can.width, this.can.height);
this.ctxSave.closePath(); //结束路径状态，结束当前路径，如果是一个未封闭的图形，会自动将首尾相连封闭起来
this.ctxSave.fill(); //填充
this.ctxSave.stroke(); //绘制
this.completedDraw = true;
this.$emit("finish", this.pointArr.slice(1));
},
/*验证canvas画布是否为空函数*/
isCanvasBlank(canvas) {
var blank = document.createElement("canvas"); //创建一个空canvas对象
blank.width = canvas.width;
blank.height = canvas.height;
return canvas.toDataURL() == blank.toDataURL(); //为空 返回true
},
/*canvas生成圆点*/
GetRandomNum(Min, Max) {
var Range = Max - Min;
var Rand = Math.random();
return Min + Math.round(Rand * Range);
},
makearc(ctx, x, y, r, s, e, color) {
ctx.clearRect(0, 0, 199, 202); //清空画布
ctx.beginPath();
ctx.fillStyle = color;
ctx.arc(x, y, r, s, e);
ctx.fill();
},
reset() {
this.ctx.clearRect(0, 0, this.can.width, this.can.height);
this.ctxSave.clearRect(0, 0, this.canSave.width, this.canSave.height);
this.pointArr = [];
this.completedDraw = false;
this.open = false;
},
// 撤销上一步
revoke() {
if (this.open && this.single) {
this.reset();
}
this.ctx.clearRect(0, 0, this.can.width, this.can.height);
this.ctxSave.clearRect(0, 0, this.canSave.width, this.canSave.height);
this.pointArr.pop();
this.pointArr.map((item) => {
let _e = {
layerX: item.x,
layerY: item.y,
};
this.handleCanvasSaveMove(_e);
});
},
isExistIntersection() {
let result = false;
for (let i = 0; i < this.pointArr.length - 1; i++) {
let a = this.pointArr[i];
let b = this.pointArr[i + 1];
for (let j = 0; j < this.pointArr.length - 1; j++) {
if (i == j) {
continue;
}
let c = this.pointArr[j];
let d = this.pointArr[j + 1];
result = this.isIntersection(a, b, c, d);
if (result) {
return result;
}
// console.log(result)
}
}
return result;
},
//判断两个线段是否相交
isIntersection(a, b, c, d) {
/** 1 解线性方程组, 求线段交点. **/
// 如果分母为0 则平行或共线, 不相交
var denominator = (b.y - a.y) * (d.x - c.x) - (a.x - b.x) * (c.y - d.y);
if (denominator == 0) {
return false;
}
// 线段所在直线的交点坐标 (x , y)
var x =
((b.x - a.x) * (d.x - c.x) * (c.y - a.y) +
(b.y - a.y) * (d.x - c.x) * a.x -
(d.y - c.y) * (b.x - a.x) * c.x) /
denominator;
var y =
-(
(b.y - a.y) * (d.y - c.y) * (c.x - a.x) +
(b.x - a.x) * (d.y - c.y) * a.y -
(d.x - c.x) * (b.y - a.y) * c.y
) / denominator;
/** 2 判断交点是否在两条线段上 **/
if (
// 交点在线段1上
(x - a.x) * (x - b.x) < 0 &&
(y - a.y) * (y - b.y) < 0 &&
// 且交点也在线段2上
(x - c.x) * (x - d.x) < 0 &&
(y - c.y) * (y - d.y) < 0
) {
// // 返回交点p
// return {
// x: x,
// y: y,
// };
return true;
}
//否则不相交
return false;
},
},
async mounted() {
this.initCanvas();
this.getVideo();
},
beforeDestroy() {
this.$Bus.$off("CHANGE_OPEN");
this.$Bus.$off("START_DRAWING");
this.videoUrl = "";
},
};
</script>
<style lang="scss" scoped>
.canvas-box {
position: relative;
width: 100%;
height: 100%;
> canvas {
position: absolute;
top: 0;
left: 0;
// width: 1000px;
// height: 800px;
width: 100%;
height: 100%;
}
}
</style>
参考文献：
Vue3 区域绘制,有撤销、重置和判断线段重合功能_瞎跑的uice的博客-CSDN博客
这篇文章，我是综合了文献里的各种方法，以及自己修改 添加一部分
感觉这篇文章不太好，侵权啥的，私信我，立刻删
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
