SwiftUI视图中指定点击区域实现需求求助

核心逻辑 #

给整个游戏区域绑定点击事件，判断点击目标是否为绿色圆点：若是则不执行任何操作，若否则弹出alert。以下分两种常见场景给出具体实现：

场景1：DOM元素实现绿色圆点 #

适合用HTML+CSS直接渲染圆点的情况，步骤如下：

1. 构建DOM结构

<!-- 游戏区域容器 -->
<div id="gameArea">
  <!-- 绿色圆点 -->
  <div id="greenDot"></div>
</div>

2. 设置样式

#gameArea {
  width: 100vw;
  height: 100vh;
  position: relative;
  background: #f5f5f5;
}

#greenDot {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #2ecc71;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

3. 编写交互逻辑（两种可选方案）
   方案A：利用事件阻止冒泡

const greenDot = document.getElementById('greenDot');
const gameArea = document.getElementById('gameArea');

// 点击圆点时阻止事件传递到父容器
greenDot.addEventListener('click', (e) => {
  e.stopPropagation();
});

// 点击容器其他区域触发alert
gameArea.addEventListener('click', () => {
  alert('点击了圆点以外区域！');
});

方案B：直接判断点击目标

const gameArea = document.getElementById('gameArea');

gameArea.addEventListener('click', (e) => {
  // 检查点击元素是否为圆点或圆点的子元素
  if (!e.target.closest('#greenDot')) {
    alert('点击了圆点以外区域！');
  }
});

场景2：Canvas绘制绿色圆点 #

适合游戏用Canvas渲染的情况，核心是通过坐标计算判断点击范围：

1. 构建Canvas结构

<canvas id="gameCanvas" width="800" height="600"></canvas>

2. 绘制圆点+交互逻辑

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

// 圆点参数：圆心坐标、半径、颜色
const dotConfig = {
  x: 400,
  y: 300,
  radius: 25,
  color: '#2ecc71'
};

// 绘制圆点函数
function renderDot() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = dotConfig.color;
  ctx.beginPath();
  ctx.arc(dotConfig.x, dotConfig.y, dotConfig.radius, 0, Math.PI * 2);
  ctx.fill();
}

renderDot();

// 监听Canvas点击事件
canvas.addEventListener('click', (e) => {
  // 获取点击点在Canvas内的相对坐标
  const rect = canvas.getBoundingClientRect();
  const clickX = e.clientX - rect.left;
  const clickY = e.clientY - rect.top;

  // 计算点击点到圆心的距离
  const distanceToCenter = Math.sqrt(
    Math.pow(clickX - dotConfig.x, 2) + Math.pow(clickY - dotConfig.y, 2)
  );

  // 距离大于半径则触发alert
  if (distanceToCenter > dotConfig.radius) {
    alert('点击了圆点以外区域！');
  }
});

内容的提问来源于stack exchange，提问作者Daisy