大家好！我是写了几年代码的老前端，Zui近接了个需求：Zuo一个圆桌会议可视化选座系统。Ru果你也在Zuo类似的可视化选座需求，直接拿我的代码改，少走半年弯路。

const SEAT_COUNT = ;    // 总座位数const SEAT_DISTANCE = TABLE_RADIUS + ; // 座位到圆心的距离function createSeat {  const seat = new PIXI.Graphics;  updateSeatStyle;  // 极坐标转直角坐标：角度 → x/y  const angle =  * Math.PI * ;  const x = CENTER_X + Math.cos * SEAT_DISTANCE;  const y = CENTER_Y + Math.sin * SEAT_DISTANCE;  seat.x = x;  seat.y = y;  seat.rotation = angle + Math.PI/; // 让座位朝向圆心，geng自然  // ... 交互逻辑}

先搭好画布和分层容器，这是 Pixi 项目的标准起点：

const app = new PIXI.Application;document.body.appendChild;// 分层：基础层+ 拖拽层const baseLayer = new PIXI.Container;const dragLayer = new PIXI.Container;app.stage.addChild;

直接监听pointertap事件，切换座位状态：

PixiJS拖拽的坑：不同版本获取鼠标坐标的API不一样，我封装了一个兼容函数：

const STORAGE_KEY = 'roundTableSeats';let occupiedSeats = JSON.parse || '');function saveSeatLayout { localStorage.setItem);}

const tableRadius = ; // 圆桌半径 const tableColor= 'grey'; function drawCircle { let circle=new PIXI.;Graphics; circle.;beginFill; circle.;drawCircle; circle.;endFill; circle.;x=x;//table center x circle.;y=y;//table center y baseLayer.*addChild; } drawCircle;

function getGlobalPosition { if return e.data.getGlobalPosition; else if return e.data.global else return app.renderer.plugins.interaction.mouse.*global;}

坑1 : PixiJS 版本 API 不兼容

问题 :e.data.getGlobalPosition is not a function

原因 : v6 和 v7 的事件对象结构不一样

解决 : 封装getGlobalPosition兼容函数，同时锁定 CDN 版本为 v6。

坑2 : 座位重叠

问题 : 手动算坐标导致座位挤在一起

解决 : 用极坐标均分算法，angle = * Math.PI * ，保证每个座位间隔一致

坑3 : 拖拽卡顿

问题 : 频繁重绘基础层导致帧率掉帧

解决 : 用dragLayer单独渲染拖拽元素，基础层只在状态变化时重绘

坑4 : CSP警告

问题 : 浏览器报upgrade-insecure-requests警告

解决 : 在加 CSP 元标签，明确允许 PixiJS CDN 和内联脚本