js实现弧形座位图

使用Canvas绘制弧形座位图

通过HTML5 Canvas可以灵活绘制弧形排列的座位图。以下是一个基础实现示例：

const canvas = document.getElementById('seatCanvas');
const ctx = canvas.getContext('2d');
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = 150;
const seatCount = 12;
const seatSize = 20;

for (let i = 0; i < seatCount; i++) {
  const angle = (i * 2 * Math.PI / seatCount) - Math.PI/2;
  const x = centerX + radius * Math.cos(angle);
  const y = centerY + radius * Math.sin(angle);

  ctx.beginPath();
  ctx.arc(x, y, seatSize, 0, 2 * Math.PI);
  ctx.fillStyle = '#3498db';
  ctx.fill();
  ctx.stroke();

  // 座位编号
  ctx.fillStyle = '#fff';
  ctx.font = '12px Arial';
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.fillText(i+1, x, y);
}

使用SVG实现弧形座位

SVG更适合需要交互的场景，以下是SVG实现方式：

<svg width="400" height="400" id="seatSvg">
  <g transform="translate(200,200)">
    <script>
      const seatCount = 8;
      const radius = 150;
      const seatSize = 20;

      for (let i = 0; i < seatCount; i++) {
        const angle = (i * 360 / seatCount) - 90;
        const radian = angle * Math.PI / 180;
        const x = radius * Math.cos(radian);
        const y = radius * Math.sin(radian);

        const seat = document.createElementNS("http://www.w3.org/2000/svg", "circle");
        seat.setAttribute("cx", x);
        seat.setAttribute("cy", y);
        seat.setAttribute("r", seatSize);
        seat.setAttribute("fill", "#e74c3c");
        seat.setAttribute("class", "seat");
        seat.setAttribute("data-seat", i+1);

        const text = document.createElementNS("http://www.w3.org/2000/svg", "text");
        text.setAttribute("x", x);
        text.setAttribute("y", y);
        text.setAttribute("fill", "white");
        text.setAttribute("text-anchor", "middle");
        text.setAttribute("dominant-baseline", "central");
        text.textContent = i+1;

        document.getElementById("seatSvg").appendChild(seat);
        document.getElementById("seatSvg").appendChild(text);
      }
    </script>
  </g>
</svg>

使用CSS变换实现

纯CSS方案适合简单场景，结合JavaScript动态生成：

<div class="stage">
  <div class="arc-seats"></div>
</div>

<style>
  .stage {
    position: relative;
    width: 400px;
    height: 400px;
  }
  .arc-seats {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .seat {
    position: absolute;
    width: 30px;
    height: 30px;
    background: #2ecc71;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
  }
</style>

<script>
  const container = document.querySelector('.arc-seats');
  const seatCount = 10;
  const radius = 150;

  for (let i = 0; i < seatCount; i++) {
    const seat = document.createElement('div');
    seat.className = 'seat';
    seat.textContent = i+1;

    const angle = (i * 360 / seatCount) - 90;
    const radian = angle * Math.PI / 180;
    const x = radius * Math.cos(radian);
    const y = radius * Math.sin(radian);

    seat.style.transform = `translate(${x}px, ${y}px)`;
    container.appendChild(seat);
  }
</script>

添加交互功能

为Canvas方案添加点击检测的示例：

canvas.addEventListener('click', (e) => {
  const rect = canvas.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;

  for (let i = 0; i < seatCount; i++) {
    const angle = (i * 2 * Math.PI / seatCount) - Math.PI/2;
    const seatX = centerX + radius * Math.cos(angle);
    const seatY = centerY + radius * Math.sin(angle);

    const distance = Math.sqrt((x - seatX)2 + (y - seatY)2);
    if (distance <= seatSize) {
      console.log(`Seat ${i+1} clicked`);
      ctx.fillStyle = '#e74c3c';
      ctx.beginPath();
      ctx.arc(seatX, seatY, seatSize, 0, 2 * Math.PI);
      ctx.fill();
      break;
    }
  }
});

参数化配置

创建可配置的弧形座位生成函数：

function createArcSeats(options) {
  const defaults = {
    container: '#seatContainer',
    radius: 200,
    seats: 12,
    seatSize: 15,
    startAngle: -90,
    endAngle: 90,
    fillColor: '#3498db',
    textColor: '#fff'
  };

  const config = {...defaults, ...options};
  const centerX = config.radius + config.seatSize;
  const centerY = config.radius + config.seatSize;

  // 实现逻辑...
}

// 调用示例
createArcSeats({
  container: '#theaterSeats',
  seats: 24,
  radius: 250,
  startAngle: -60,
  endAngle: 60
});

以上方案可根据实际需求选择，Canvas适合复杂绘制，SVG适合需要DOM操作的场景，CSS方案适合简单可视化。每种方法都可以扩展添加更多功能如座位状态管理、动画效果等。