Pixi JS Graphics：在保持中心的同时调整圆的大小

Question

我正在尝试通过循环缩放方法来调整图形圆的大小。循环将使圆圈的比例从 1 到 3，然后从 3 到 1 设置动画。下面的代码按我的预期工作，但是，当圆圈扩大时，它会调整到右下角的方向。然后，在达到给定的最大比例后，圆圈会重新调整到相反的方向（左上角）。这是代码：

const app = new PIXI.Application({
    width: 300,
    height: 300,
});

const canvasDiv = document.getElementById('canvasDiv');
canvasDiv.appendChild(app.view);

let circle = new PIXI.Graphics();
circle.beginFill(0xffffff);
circle.drawCircle(5, 5, 5);
circle.x = 150;
circle.y = 150;
circle.endFill();
app.stage.addChild(circle);

let scale = 1, motion = 1;

app.ticker.add(() => animateLoop());

function animateLoop(){
    if (motion == 1){
        if (scale < 3){
            scale += 0.2;
        }
        else{
            motion = 0;
        }
    }
    else{
        if (scale > 1){
            scale -= 0.2;
        }
        else{
            motion = 1;
        }
    }
    circle.scale.set(scale,scale);
}

我阅读了 Pixi 站点并看到了在调整大小时处理图形居中的选项 pivot。我尝试实施它，它确实有轻微的改进。但是，尽管尝试了多个枢轴值，但我无法准确地将圆圈居中。这是添加的代码：

/** On Motion 1 */
if (scale < 3){
    scale += 0.2;
    circle.pivot.x += 0.5;
    circle.pivot.y += 0.2;
}
/** On Motion 0 */
if (scale > 1){
    scale -= 0.2;
    circle.pivot.x -= 0.5;
    circle.pivot.y -= 0.2;
}

我该如何解决这个问题？

Answer 1

枢轴点是对象局部坐标 space 内某处的位置。

如果你看下图：

可以看到左上角在x:0 | y: 0 而右下角在 x: circle.width | y: circle.height.

这意味着如果我们想从圆的中心缩放圆，我们需要将轴心点移动到圆的中心！ (x: 圆.width/2 | y: 圆.height/2)

这是一个例子：

const app = new PIXI.Application({
  width: 400,
  height: 300,
  backgroundColor: 0x1099bb,
  resolution: window.devicePixelRatio || 1,
});
document.body.appendChild(app.view);

const container = new PIXI.Container();

let circle = new PIXI.Graphics();
circle.beginFill(0x00ffff);
circle.drawCircle(50, 50, 50);

circle.endFill();
circle.x = 200;
circle.y = 150;
circle.pivot.x = circle.width / 2;
circle.pivot.y = circle.height / 2;
app.stage.addChild(circle);

let scale = 1,
  motion = 1;

app.ticker.add(() => animateLoop());

function animateLoop() {
  if (motion == 1) {
    if (scale < 3) {
      scale += 0.1;
    } else {
      motion = 0;
    }
  } else {
    if (scale > 1) {
      scale -= 0.1;
    } else {
      motion = 1;
    }
  }
  circle.scale.set(scale, scale);
}

<script src="https://pixijs.download/release/pixi.js"></script>

Pixi JS Graphics：在保持中心的同时调整圆的大小

Pixi JS Graphics: Resize Circle while maintaining center

javascript

geometry

html5-canvas

centering

pixi.js