几何学在前端边界计算中的应用和原理分析(一)

const generateRectangleMeta = (startPos: [number, number], w: number, h: number) => {
  if (
    startPos &&
    Array.isArray(startPos) &&
    startPos.length >= 2 &&
    typeof w === "number" &&
    typeof h === "number"
  ) {
    const [a0, b0] = startPos;
    const a1 = a0 + w;
    const b1 = b0 + h;
    return {
      startPos,
      w,
      h,
      endPos: [a1, b1],
      pos: [
        [a0, b0],
        [a1, b0],
        [a1, b1],
        [a0, b1],
      ],
    };
  } else {
    throw new Error("Please pass in the correct parameters");
  }
};

const cardOffset = ref({ x: 0, y: 0 });
onMounted(() => {
    // 获取画布左上角距离页面左上角的距离
  const { offsetTop, offsetLeft } = document.querySelector("#boundCard") as HTMLElement;
  cardOffset.value.x = offsetLeft;
  cardOffset.value.y = offsetTop;
});
const { x, y } = useMouse(window, (x, y) => {
  // 边界计算
  const { x: x0, y: y0 } = cardOffset.value;
  const dotX = x - x0;
  const dotY = y - y0;
  const { startPos, endPos } = rectangle;
  if (
    startPos[0] <= dotX &&
    endPos[0] >= dotX &&
    startPos[1] <= dotY &&
    endPos[1] >= dotY
  ) {
      // 在矩形内
    console.log("inset");
  } else {
      // 在矩形外
    console.log("out");
  }
});

// event.ts
import { onMounted, onUnmounted } from 'vue'
export function useEventListener(
    target: HTMLElement | Window, 
    event: keyof HTMLElementEventMap, 
    callback: (this: HTMLElement, ev: any) => any) {
  onMounted(() => target.addEventListener(event, callback))
  onUnmounted(() => target.removeEventListener(event, callback))
}
// mouse.ts
import { ref } from 'vue'
import { useEventListener } from './event'
export function useMouse(target: HTMLElement | Window, callback?: (x: number, y:number) => void) {
  const x = ref(0)
  const y = ref(0)
  useEventListener(target, 'mousemove', (event) => {
    const { pageX, pageY } = event;
    x.value = pageX
    y.value = pageY
    callback && callback(pageX, pageY)
  })
  return { x, y }
}

const generateCircleMeta = (pos: [number, number], r: number = 1) => {
  if(pos && Array.isArray(pos) && pos.length) {
    const [x, y] = pos;
    return {
      startPos: [x - r, y - r],
      pos,
      r
    }
  }else {
    throw new Error("Please pass in the correct parameters");
  }
}

const isOutCircle = ref(false);
// 生成圆形数据元
const circle = generateCircleMeta([200, 400], 100);
useMouse(window, (x, y) => {
  // 边界计算
  const { x: x0, y: y0 } = cardOffset.value;
  const dotX = x - x0;
  const dotY = y - y0;
  const { pos, r } = circle;
  const r1 = Math.sqrt(Math.pow(dotX - pos[0], 2) + Math.pow(dotY - pos[1], 2));
  if (r >= r1) {
    console.log("inset");
    isOutCircle.value = false;
  } else {
    console.log("out");
    isOutCircle.value = true;
  }
});

const generateLineMeta = (pos: [[number, number], [number, number]]) => {
  if (pos && Array.isArray(pos) && pos.length >= 2) {
    const [A, B] = pos;
    const dx = B[0] - A[0];
    const dy = B[1] - A[1];
    const l = Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2));
    const tanAB = dy / dx;
    const AB = (Math.atan(tanAB) * 180) / Math.PI;
    return {
      startPos: A,
      endPos: B,
      angle: AB,
      l,
    };
  } else {
    throw new Error("Please pass in the correct parameters");
  }
};

const generateLinesMeta = (pos: [number, number][], isLine: boolean = false) => {
  if (pos && Array.isArray(pos) && pos.length >= 2) {
    let i = 0,
      len = pos.length,
      result = [];
    while (i < len) {
      // 如果是线段, 则不添加闭合点
      if (isLine && !pos[i + 1]) {
        break;
      }
      let A = pos[i];
      let B = pos[i + 1 > len - 1 ? 0 : i + 1];
      if (A[0] > B[0]) {
        [B, A] = [A, B];
      }
      const dx = B[0] - A[0];
      const dy = B[1] - A[1];
      const l = Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2));
      const tanAB = dy / dx;
      const AB = (Math.atan(tanAB) * 180) / Math.PI;
      result.push({
        startPos: A,
        endPos: B,
        angle: AB,
        l,
      });
      i++;
    }
    return result;
  } else {
    throw new Error("Please pass in the correct parameters");
  }
};