用vue 写一个 判断圆是否在矩形内

以下是一个简单的 Vue 示例，实现了判断圆是否在矩形内的功能。主要思路就是根据上述步骤，把圆心坐标、半径和矩形的边界坐标作为变量进行比较：

<template>
  <div>
    <h2>判断圆是否在矩形内</h2>
    <svg :width="width" :height="height">
      <rect :x="rect.x" :y="rect.y" :width="rect.width" :height="rect.height" fill="#ccc"/>
      <circle :cx="circle.cx" :cy="circle.cy" :r="circle.r" fill="#f00"/>
    </svg>
    <p v-if="isCircleInsideRect">圆在矩形内</p>
    <p v-else>圆不在矩形内</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      width: 200,
      height: 200,
      rect: {
        x: 50,
        y: 50,
        width: 100,
        height: 100,
      },
      circle: {
        cx: 100,
        cy: 100,
        r: 30,
      },
    };
  },
  computed: {
    isCircleInsideRect() {
      const { x, y, width, height } = this.rect;
      const { cx, cy, r } = this.circle;
      const distance = Math.sqrt((cx - x - width / 2) ** 2 + (cy - y - height / 2) ** 2);
      if (distance > r + Math.sqrt(width ** 2 + height ** 2) / 2) {
        return false;
      } else if (cx < x || cx > x + width || cy < y || cy > y + height) {
        return false;
      } else if (cx > x && cx < x + width && cy > y && cy < y + height) {
        return true;
      } else {
        const dx = cx < x ? x - cx : cx > x + width ? cx - (x + width) : 0;
        const dy = cy < y ? y - cy : cy > y + height ? cy - (y + height) : 0;
        return dx ** 2 + dy ** 2 < r ** 2;
      }
    },
  },
};
</script>

在上面的代码中，我们使用了 SVG 元素来绘制矩形和圆，使用了计算属性 `isCircleInsideRect` 来判断圆是否在矩形内。具体判断逻辑在计算属性中实现。需要注意的是，计算属性中的 `this.rect` 和 `this.circle` 是从 data 中获取的，因此需要在 data 中定义好这些变量。