fix:向量

src/layouts/config.ts

@@ -136,4 +136,11 @@ export const MenuList = [
     link: '/vue-konva',
     active: false,
   },
+  {
+    title: '向量',
+    caption: 'JavaScript 线性代数：向量',
+    icon: require('./menuListIcons/amis.svg'),
+    link: '/vector',
+    active: false,
+  },
 ];

src/modules/vector/IndexPage.vue

+<!--
+ * JavaScript 线性代数：向量
+ * https://juejin.cn/post/6844903859689619469
+-->
+<script setup lang="ts">
+import { reactive, onMounted } from 'vue';
+import { Vector } from './utils';
+
+interface Point {
+  x: number;
+  y: number;
+  gap?: number;
+  [proppName: string]: any;
+}
+
+const stageSize = reactive({
+  width: 1200,
+  height: 800,
+  gridGap: 100,
+});
+const state = reactive({
+  canvasDom: null as any,
+  pen: null as any,
+});
+
+onMounted(() => {
+  state.canvasDom = document.getElementById('canvas-grid');
+  state.pen = state.canvasDom.getContext('2d');
+
+  drawGrid();
+
+  const pointO = { x: 500, y: 300, name: 'O' };
+  const pointA = { x: 600, y: 200, name: 'A' };
+  const pointB = { x: 400, y: 200, name: 'B' };
+  drawVector(pointO, pointA);
+  drawVector(pointO, pointB);
+
+  // 加法
+  const pointC = new Vector(pointO, pointA).add(pointB);
+  const len = new Vector(pointO, pointB).length;
+  console.log('OB向量长度', len);
+
+  drawVector(pointO, pointC, '#21BA45');
+
+  // 减
+  // const pointD = new Vector(pointO, pointB).subtract(pointA);
+  // console.log('pointD', pointD);
+  // drawVector(pointO, pointD, '#FFA000');
+
+  // 求夹角
+  const angle = new Vector(pointO, pointA).dotProduct(pointB);
+  console.log('夹角', angle);
+});
+
+function drawVector(pointX: Point, pointY: Point, color = '#F44336') {
+  const pen = state.pen;
+
+  pen.save();
+  pen.beginPath();
+  pen.moveTo(pointX.x, pointX.y);
+  pen.lineTo(pointY.x, pointY.y);
+  pen.lineWidth = 4;
+  pen.strokeStyle = color;
+  pen.stroke();
+
+  pen.fillText(pointX.name, pointX.x, pointX.y);
+  pen.fillText(pointY.name, pointY.x, pointY.y);
+  pen.restore();
+}
+
+// 网格线
+function drawGrid() {
+  let canvas: any = document.getElementById('canvas-grid');
+  let pen = canvas.getContext('2d');
+
+  // 绘制网格
+  const step = stageSize.gridGap;
+  const h = stageSize.height;
+  const w = stageSize.width;
+  const w_l = w / step;
+  const h_l = h / step;
+
+  // 横着的线
+  pen.save();
+  for (let i = 0; i <= h_l; i++) {
+    pen.beginPath();
+    pen.moveTo(0, i * step);
+    pen.lineTo(w, i * step);
+    pen.stroke();
+  }
+  // 竖着的线
+  for (let i = 0; i <= w_l; i++) {
+    pen.beginPath();
+    pen.moveTo(i * step, 0);
+    pen.lineTo(i * step, h);
+    pen.stroke();
+  }
+  pen.restore();
+}
+</script>
+<template>
+  <div class="center">
+    <div class="canvas-box">
+      <canvas
+        id="canvas-grid"
+        :width="stageSize.width"
+        :height="stageSize.height"
+        style="position: absolute"
+      ></canvas>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.canvas-box {
+  box-sizing: border-box;
+  width: 1200px;
+  height: 800px;
+  border: 1px solid #000;
+  position: relative;
+}
+</style>

src/modules/vector/route.ts

+export default [
+  {
+    path: 'vector',
+    name: 'VECTOR',
+    component: () => import('./IndexPage.vue'),
+    meta: {
+      title: '向量',
+      permission: ['*'],
+      keepalive: true,
+    },
+  },
+];

src/modules/vector/utils.ts

+interface Point {
+  x: number;
+  y: number;
+  [proppName: string]: any;
+}
+
+/**
+ * 创建一个2维度向量类
+ */
+export class Vector {
+  components: any;
+  length: number;
+  constructor(...components: any) {
+    this.components = components;
+    const pointO = components[0];
+    const pointA = components[1];
+
+    const diffX = pointA.x - pointO.x;
+    const diffY = pointA.y - pointO.y;
+    this.length = Math.sqrt(diffX * diffX + diffY * diffY);
+  }
+
+  // 加法
+  add(components: any) {
+    const pointO = this.components[0];
+    const pointA = this.components[1];
+    const pointB = components;
+    return {
+      x: pointA.x + pointB.x - pointO.x,
+      y: pointA.y + pointB.y - pointO.y,
+    };
+  }
+
+  // 减
+  subtract(components: any) {
+    const pointO = this.components[0];
+    const pointA = this.components[1];
+    const pointC = components;
+    return {
+      x: pointA.x - pointC.x + pointO.x,
+      y: pointA.y - pointC.y + pointO.y,
+    };
+  }
+
+  // 向量点乘：（内积）
+  // https://zhuanlan.zhihu.com/p/359975221
+  dotProduct(components: any) {
+    const pointO = this.components[0];
+    const pointA = this.components[1];
+    const pointB = components;
+
+    const _pointA = { x: pointA.x - pointO.x, y: pointA.y - pointO.y };
+    const _pointB = { x: pointB.x - pointO.x, y: pointB.y - pointO.y };
+
+    // 求向量OA与OB的夹角
+
+    // AB向量 = OB向量 - OA向量
+    // const ab_x = _pointB.x - _pointA.x;
+    // const ab_y = _pointB.y - _pointA.y;
+
+    // OA向量 * OB向量 > 0，夹角在0~90度之间
+    // OA向量 * OB向量 = 0，正交，相互垂直
+    // OA向量 * OB向量 < 0，夹角在90度~180度之间
+    //
+    // OA向量 * OB向量 = x1*x2 + y1*y2;
+    const abMultiplication = _pointA.x * _pointB.x + _pointA.y * _pointB.y;
+
+    // OA向量的模
+    const abs_OA = new Vector({ x: 0, y: 0 }, _pointA).length;
+
+    // OB向量的模
+    const abs_OB = new Vector({ x: 0, y: 0 }, _pointB).length;
+
+    // 得到弧度值
+    let result = Math.acos(abMultiplication / (abs_OA * abs_OB));
+    // 转为角度值
+    result = toAngle(result);
+
+    const arr = [];
+    arr.push(_pointA);
+    arr.push({ x: 0, y: 0 });
+    arr.push(_pointB);
+    const is_clockwise = isClockwise(arr);
+    if (is_clockwise) {
+      // 顺时针方向 大于180度
+      result = 360 - result;
+    } else {
+    }
+
+    return result;
+  }
+}
+
+/**
+ * 判断坐标数组是否顺时针（默认为false）
+ * @param {Point[]} points 点坐标数组 [{x:0,y:0}...]
+ * @returns {boolean} 是否顺时针
+ */
+export function isClockwise(points: Point[]) {
+  // 三个点可以判断矢量是顺时针旋转还是逆时针旋转的，但由于可能存在凹边，所以并不是任意三点都可以正确反映多边形的走向
+  // 因此需要取多边形中绝对是凸边的点来判断，
+  // 多边形中的极值点（x最大或x最小或y最大或y最小）它与相邻两点构成的边必然是凸边，因此我们先取出多边形中的极值点，再由极值点和其前后两点去判断矢量的走向，从而判断出多边形的走向。
+  if (!Array.isArray(points) || points.length < 3) {
+    console.error('多边形坐标集合不能少于3个');
+    return false;
+  }
+  let coords = JSON.parse(JSON.stringify(points));
+
+  if (coords[0] === coords[coords.length - 1]) {
+    coords = coords.slice(0, coords.length - 1);
+  }
+  coords = coords.reverse();
+  let maxXIndex = 0;
+  let maxX = parseFloat(coords[maxXIndex].x);
+  let c1;
+  let c2;
+  let c3;
+  for (let i = 0; i < coords.length; i++) {
+    if (parseFloat(coords[i].x) > maxX) {
+      maxX = parseFloat(coords[i].x);
+      maxXIndex = i;
+    }
+  }
+  if (maxXIndex === 0) {
+    c1 = coords[coords.length - 1];
+    c2 = coords[maxXIndex];
+    c3 = coords[maxXIndex + 1];
+  } else if (maxXIndex === coords.length - 1) {
+    c1 = coords[maxXIndex - 1];
+    c2 = coords[maxXIndex];
+    c3 = coords[0];
+  } else {
+    c1 = coords[maxXIndex - 1];
+    c2 = coords[maxXIndex];
+    c3 = coords[maxXIndex + 1];
+  }
+  const x1 = parseFloat(c1.x);
+  const y1 = parseFloat(c1.y);
+  const x2 = parseFloat(c2.x);
+  const y2 = parseFloat(c2.y);
+  const x3 = parseFloat(c3.x);
+  const y3 = parseFloat(c3.y);
+  const s = (x1 - x3) * (y2 - y3) - (x2 - x3) * (y1 - y3);
+  return s < 0;
+}
+
+/**
+ * 转为弧度值
+ */
+export function toRadian(val: number) {
+  return (val * Math.PI) / 180;
+}
+/**
+ * 转角度值
+ */
+export function toAngle(val: number) {
+  return (val * 180) / Math.PI;
+}

src/modules/vue-konva/utils.ts

+/*
+ * @Description: 多边形核心算法
+ * 源码Gitee：https://gitee.com/dhzx/js-polygon-algorithm
+ */
+
+interface Point {
+  x: number;
+  y: number;
+  gap?: number;
+  [proppName: string]: any;
+}
+
+/**
+ * 获取多边形中心点
+ * @param {Point[]} points 点坐标数组 [{x:0,y:0}...]
+ */
+export function getPolygonCenter(points: Point[]) {
+  if (!Array.isArray(points) || points.length < 3) {
+    console.error('多边形坐标集合不能少于3个');
+    return;
+  }
+  const result = { x: 0, y: 0 };
+  points.forEach((p) => {
+    result.x += p.x;
+    result.y += p.y;
+  });
+  result.x /= points.length;
+  result.y /= points.length;
+  return result;
+}
+
+/**
+ * 获取多边形重心（质心）
+ * @param {Point[]} points 点坐标数组 [{x:0,y:0}...]
+ */
+export function getPolygonBaryCenter(points: Point[]) {
+  if (!Array.isArray(points) || points.length < 3) {
+    console.error('多边形坐标集合不能少于3个');
+    return;
+  }
+  const result = { x: 0, y: 0 };
+  let area = 0;
+  for (let i = 1; i <= points.length; i++) {
+    const curX = points[i % points.length].x;
+    const curY = points[i % points.length].y;
+    const nextX = points[i - 1].x;
+    const nextY = points[i - 1].y;
+    const temp = (curX * nextY - curY * nextX) / 2;
+    area += temp;
+    result.x += (temp * (curX + nextX)) / 3;
+    result.y += (temp * (curY + nextY)) / 3;
+  }
+  result.x /= area;
+  result.y /= area;
+  return result;
+}
+
+/**
+ * 判断点是否在多边形内部
+ * @param {Point} point 点坐标
+ * @param {Point[]} points 点坐标数组 [{x:0,y:0}...]
+ * @returns
+ */
+export function isInPolygon(point: Point, points: Point[]) {
+  if (!Array.isArray(points) || points.length < 3) {
+    console.error('多边形坐标集合不能少于3个');
+    return;
+  }
+  const n = points.length;
+  let nCross = 0;
+  for (let i = 0; i < n; i++) {
+    const p1 = points[i];
+    const p2 = points[(i + 1) % n];
+    // 求解 y=p.y 与 p1 p2 的交点
+    // p1p2 与 y=p0.y平行
+    if (p1.y === p2.y) continue;
+    // 交点在p1p2延长线上
+    if (point.y < Math.min(p1.y, p2.y)) continue;
+    // 交点在p1p2延长线上
+    if (point.y >= Math.max(p1.y, p2.y)) continue;
+    // 求交点的 X 坐标
+    const x = ((point.y - p1.y) * (p2.x - p1.x)) / (p2.y - p1.y) + p1.x;
+    // 只统计单边交点
+    if (x > point.x) nCross++;
+  }
+  return nCross % 2 === 1;
+}
+
+/**
+ * 缩放多边形坐标
+ * @decoration 需配合顺时针判断方法一起使用
+ * @param {Point[]} points 点坐标数组 [{x:0,y:0}...]
+ * @param {number} extra 外延大小。为正: 向外扩; 为负: 向内缩
+ * @return {Point[]} 扩展或缩小后的多边形点坐标数组
+ */
+export function scalePolygon2(points: Point[], extra: number) {
+  if (!Array.isArray(points) || points.length < 3) {
+    console.error('多边形坐标集合不能少于3个');
+    return;
+  }
+  const ps = points;
+  // 通过顺时针判断取正值还是负值
+  const extra0 = isClockwise(ps) ? -extra : extra;
+
+  const norm = (x: number, y: number) => Math.sqrt(x * x + y * y);
+
+  const len = ps.length;
+  const polygon = [];
+  for (let i = 0; i < len; i++) {
+    const point = ps[i];
+    const point1 = ps[i === 0 ? len - 1 : i - 1];
+    const point2 = ps[i === len - 1 ? 0 : i + 1];
+
+    // 向量PP1
+    const vectorX1 = point1.x - point.x; // 向量PP1 横坐标
+    const vectorY1 = point1.y - point.y; // 向量PP1 纵坐标
+    const n1 = norm(vectorX1, vectorY1); // 向量的平方根 为了对向量PP1做单位化
+    let vectorUnitX1 = vectorX1 / n1; // 向量单位化 横坐标
+    let vectorUnitY1 = vectorY1 / n1; // 向量单位化 纵坐标
+
+    // 向量PP2
+    const vectorX2 = point2.x - point.x; // 向量PP2 横坐标
+    const vectorY2 = point2.y - point.y; // 向量PP2 纵坐标
+    const n2 = norm(vectorX2, vectorY2); // 向量的平方根 为了对向量PP1做单位化
+    let vectorUnitX2 = vectorX2 / n2; // 向量单位化 横坐标
+    let vectorUnitY2 = vectorY2 / n2; // 向量单位化 纵坐标
+
+    // PQ距离
+    const vectorLen =
+      -extra0 /
+      Math.sqrt(
+        (1 - (vectorUnitX1 * vectorUnitX2 + vectorUnitY1 * vectorUnitY2)) / 2
+      );
+
+    // 根据向量的叉乘积来判断角是凹角还是凸角
+    if (vectorX1 * vectorY2 + -1 * vectorY1 * vectorX2 < 0) {
+      vectorUnitX2 *= -1;
+      vectorUnitY2 *= -1;
+      vectorUnitX1 *= -1;
+      vectorUnitY1 *= -1;
+    }
+
+    // PQ的方向
+    const vectorX = vectorUnitX1 + vectorUnitX2;
+    const vectorY = vectorUnitY1 + vectorUnitY2;
+    const n = vectorLen / norm(vectorX, vectorY);
+    const vectorUnitX = vectorX * n;
+    const vectorUnitY = vectorY * n;
+
+    const polygonX = vectorUnitX + point.x;
+    const polygonY = vectorUnitY + point.y;
+
+    polygon[i] = { x: polygonX, y: polygonY };
+  }
+
+  return polygon;
+}
+
+/**
+ * 缩放多边形坐标
+ * @decoration 需配合顺时针判断方法一起使用
+ * @param {Point[]} points 点坐标数组 [{x:0,y:0}...]
+ * @param {number} extra 外延大小。为正: 向外扩; 为负: 向内缩
+ * @return {Point[]} 扩展或缩小后的多边形点坐标数组
+ */
+export function scalePolygon(points: Point[], extra = 0) {
+  if (!Array.isArray(points) || points.length < 3) {
+    console.error('多边形坐标集合不能少于3个');
+    return;
+  }
+  const ps = points;
+  // 通过顺时针判断取正值还是负值
+  //   const extra0 = isClockwise(ps) ? -extra : extra;
+
+  const norm = (x: number, y: number) => Math.sqrt(x * x + y * y);
+
+  const len = ps.length;
+  const polygon = [];
+  for (let i = 0; i < len; i++) {
+    let extra0;
+    if (extra) {
+      extra0 = isClockwise(ps) ? -extra : extra;
+    } else {
+      const _gap = ps[i].gap || 0;
+      extra0 = isClockwise(ps) ? -_gap : _gap;
+    }
+
+    const point = ps[i];
+    const point1 = ps[i === 0 ? len - 1 : i - 1];
+    const point2 = ps[i === len - 1 ? 0 : i + 1];
+
+    // 向量PP1
+    const vectorX1 = point1.x - point.x; // 向量PP1 横坐标
+    const vectorY1 = point1.y - point.y; // 向量PP1 纵坐标
+    const n1 = norm(vectorX1, vectorY1); // 向量的平方根 为了对向量PP1做单位化
+    let vectorUnitX1 = vectorX1 / n1; // 向量单位化 横坐标
+    let vectorUnitY1 = vectorY1 / n1; // 向量单位化 纵坐标
+
+    // 向量PP2
+    const vectorX2 = point2.x - point.x; // 向量PP2 横坐标
+    const vectorY2 = point2.y - point.y; // 向量PP2 纵坐标
+    const n2 = norm(vectorX2, vectorY2); // 向量的平方根 为了对向量PP1做单位化
+    let vectorUnitX2 = vectorX2 / n2; // 向量单位化 横坐标
+    let vectorUnitY2 = vectorY2 / n2; // 向量单位化 纵坐标
+
+    // PQ距离
+    const vectorLen =
+      -extra0 /
+      Math.sqrt(
+        (1 - (vectorUnitX1 * vectorUnitX2 + vectorUnitY1 * vectorUnitY2)) / 2
+      );
+
+    // 根据向量的叉乘积来判断角是凹角还是凸角
+    if (vectorX1 * vectorY2 + -1 * vectorY1 * vectorX2 < 0) {
+      vectorUnitX2 *= -1;
+      vectorUnitY2 *= -1;
+      vectorUnitX1 *= -1;
+      vectorUnitY1 *= -1;
+    }
+
+    // PQ的方向
+    const vectorX = vectorUnitX1 + vectorUnitX2;
+    const vectorY = vectorUnitY1 + vectorUnitY2;
+    const n = vectorLen / norm(vectorX, vectorY);
+    const vectorUnitX = vectorX * n;
+    const vectorUnitY = vectorY * n;
+
+    const polygonX = vectorUnitX + point.x;
+    const polygonY = vectorUnitY + point.y;
+
+    polygon[i] = { x: polygonX, y: polygonY };
+  }
+
+  return polygon;
+}
+
+/**
+ * 判断坐标数组是否顺时针（默认为false）
+ * @param {Point[]} points 点坐标数组 [{x:0,y:0}...]
+ * @returns {boolean} 是否顺时针
+ */
+export function isClockwise(points: Point[]) {
+  // 三个点可以判断矢量是顺时针旋转还是逆时针旋转的，但由于可能存在凹边，所以并不是任意三点都可以正确反映多边形的走向
+  // 因此需要取多边形中绝对是凸边的点来判断，
+  // 多边形中的极值点（x最大或x最小或y最大或y最小）它与相邻两点构成的边必然是凸边，因此我们先取出多边形中的极值点，再由极值点和其前后两点去判断矢量的走向，从而判断出多边形的走向。
+  if (!Array.isArray(points) || points.length < 3) {
+    console.error('多边形坐标集合不能少于3个');
+    return false;
+  }
+  let coords = JSON.parse(JSON.stringify(points));
+
+  if (coords[0] === coords[coords.length - 1]) {
+    coords = coords.slice(0, coords.length - 1);
+  }
+  coords = coords.reverse();
+  let maxXIndex = 0;
+  let maxX = parseFloat(coords[maxXIndex].x);
+  let c1;
+  let c2;
+  let c3;
+  for (let i = 0; i < coords.length; i++) {
+    if (parseFloat(coords[i].x) > maxX) {
+      maxX = parseFloat(coords[i].x);
+      maxXIndex = i;
+    }
+  }
+  if (maxXIndex === 0) {
+    c1 = coords[coords.length - 1];
+    c2 = coords[maxXIndex];
+    c3 = coords[maxXIndex + 1];
+  } else if (maxXIndex === coords.length - 1) {
+    c1 = coords[maxXIndex - 1];
+    c2 = coords[maxXIndex];
+    c3 = coords[0];
+  } else {
+    c1 = coords[maxXIndex - 1];
+    c2 = coords[maxXIndex];
+    c3 = coords[maxXIndex + 1];
+  }
+  const x1 = parseFloat(c1.x);
+  const y1 = parseFloat(c1.y);
+  const x2 = parseFloat(c2.x);
+  const y2 = parseFloat(c2.y);
+  const x3 = parseFloat(c3.x);
+  const y3 = parseFloat(c3.y);
+  const s = (x1 - x3) * (y2 - y3) - (x2 - x3) * (y1 - y3);
+  return s < 0;
+}

src/router/routes.ts

@@ -5,6 +5,7 @@ import TREE from '../modules/tree/route';
 import AMIS from '../modules/amis/route';
 import VUE_STUDY from '../modules/vue-study/route';
 import VUE_KONVA from '../modules/vue-konva/route';
+import VECTOR from '../modules/vector/route';
 
 const routes: RouteRecordRaw[] = [
   {
@@ -133,6 +134,7 @@ const routes: RouteRecordRaw[] = [
           ...AMIS,
           ...VUE_STUDY,
           ...VUE_KONVA,
+          ...VECTOR,
         ],
       },
     ],