解决PIXI.Graphics元素鼠标悬停时围绕自身中心旋转异常问题

核心问题分析 #

方块旋转中心混乱的根本原因是绘制矩形时混淆了图形自身坐标与全局坐标，同时错误设置了定位逻辑：用drawRect(i,j, ...)直接以全局坐标绘制图形，而矩形的position默认是(0,0)，此时设置pivot只会让旋转中心偏移到图形自身的(size/2, size/2)，但这个点和全局坐标的目标位置不匹配，导致旋转时图形乱飞。另外代码中ticker部分尝试修改数组rects的rotation属性，这是无效操作——数组没有该属性，需要遍历单个矩形处理。

修复后的代码 #

// Define Variables
let width = window.innerWidth;
let height = window.innerHeight;

// Initialise application
let app = new PIXI.Application({ 
    width: width,
    height: height,
    antialias: true,
    transparent: false,
    resolution: 1,
    resizeTo: window
});

document.body.appendChild(app.view);

// Variables
let render = app.renderer;
let stage = app.stage;

let container = new PIXI.Container();
let size = 50;
let margin = 2;
let rects = [];

// 遍历创建网格，分离图形绘制与全局定位
for (let i = size; i < render.width - size + margin; i += size) {
    for (let j = size; j < render.height - size + margin; j += size) {            
        let rect = new PIXI.Graphics();
        // 关键：从(0,0)开始绘制矩形，让图形原点在自身左上角
        rect.beginFill(0xffffff)
           .drawRect(0, 0, size - margin, size - margin);
        // 设置pivot为矩形自身中心，确保旋转轴在中心
        rect.pivot.set(size/2, size/2);
        // 用position把矩形放到全局目标位置，加上pivot偏移保证位置准确
        rect.position.set(i + size/2, j + size/2);
        rect.interactive = true;
        // 用状态变量控制悬停时的持续旋转
        let isHovering = false;
        rect.on('pointerover', () => isHovering = true);
        rect.on('pointerout', () => isHovering = false);
        rects.push({rect, isHovering});
        container.addChild(rect);
    }
}

stage.addChild(container);

// Ticker中处理旋转逻辑
app.ticker.add((delta) => {
    rects.forEach(item => {
        if (item.isHovering) {
            item.rect.rotation += 0.05 * delta;
        }
    });
});

关键修改点说明 #

• 绘制与定位分离：drawRect(0,0, ...)让矩形基于自身原点绘制，通过position属性将其放到全局目标位置，配合pivot.set(size/2, size/2)，确保旋转中心是矩形自身的中心点。
• 修正Ticker逻辑：遍历数组中每个矩形，根据悬停状态控制旋转，用delta值保证不同帧率下旋转速度一致。
• 事件优化：改用PIXI推荐的跨设备事件pointerover/pointerout，通过状态变量实现悬停时持续旋转（原代码中mouseover仅在鼠标进入时触发一次旋转）。

内容的提问来源于stack exchange，提问作者Mr.Coder