js实现弧形座位图

实现弧形座位图的方法

使用JavaScript和Canvas或SVG可以绘制弧形座位图。以下是两种常见的方法：

Canvas方法

通过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;

ctx.fillStyle = '#3498db';
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.fill();
    ctx.fillStyle = '#fff';
    ctx.fillText(i + 1, x - 5, y + 5);
    ctx.fillStyle = '#3498db';
}

SVG方法

使用SVG可以更灵活地操作座位元素，适合需要交互的场景。

const svg = document.getElementById('seatSvg');
const centerX = 200;
const centerY = 200;
const radius = 150;
const seatCount = 12;
const seatSize = 20;

for (let i = 0; i < seatCount; i++) {
    const angle = (i * (360 / seatCount)) - 90;
    const radian = angle * Math.PI / 180;
    const x = centerX + radius * Math.cos(radian);
    const y = centerY + 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');
    svg.appendChild(seat);

    const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
    text.setAttribute('x', x - 5);
    text.setAttribute('y', y + 5);
    text.setAttribute('fill', '#fff');
    text.textContent = i + 1;
    svg.appendChild(text);
}

动态调整座位数量和半径

通过调整seatCount和radius参数，可以改变座位的数量和排列的弧度。

function drawSeats(seatCount, radius) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    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.fill();
    }
}

添加交互功能

为座位添加点击事件，可以标记选中状态。

canvas.addEventListener('click', (event) => {
    const rect = canvas.getBoundingClientRect();
    const mouseX = event.clientX - rect.left;
    const mouseY = event.clientY - rect.top;

    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);
        const distance = Math.sqrt((mouseX - x)  2 + (mouseY - y)  2);

        if (distance <= seatSize) {
            ctx.fillStyle = '#2ecc71';
            ctx.beginPath();
            ctx.arc(x, y, seatSize, 0, 2 * Math.PI);
            ctx.fill();
            break;
        }
    }
});

使用第三方库

如果需要更复杂的功能，可以考虑使用如D3.js或Paper.js等库来简化开发。

// 使用D3.js示例
const svg = d3.select('#seatSvg');
const seats = d3.range(seatCount).map(i => ({
    angle: (i * (360 / seatCount)) - 90,
    radius: radius
}));

svg.selectAll('circle')
    .data(seats)
    .enter()
    .append('circle')
    .attr('cx', d => centerX + d.radius * Math.cos(d.angle * Math.PI / 180))
    .attr('cy', d => centerY + d.radius * Math.sin(d.angle * Math.PI / 180))
    .attr('r', seatSize)
    .attr('fill', '#9b59b6');

以上方法提供了从基础到高级的实现方式，可以根据具体需求选择适合的方案。