Pixi.js 如何将 moveTo 与 OOP 对象一起使用？

Question

我使用 OOP 方法创建了一个矩形和一个方形对象。

接下来，我要将我的矩形移动到另一个位置。我使用函数 moveTo.

我的矩形是从它的创建位置移动的，而不是从绝对位置移动的。

我必须指定什么才能将此矩形移动到 x=100,y=100？

var container = new PIXI.Container();

var renderer = PIXI.autoDetectRenderer(320, 480,{backgroundColor : 0x1099bb});

document.body.appendChild(renderer.view);

requestAnimationFrame( animate );

var blue= 0x00c3ff
 
var red = 0xFF0040

var SHAPE={}

SHAPE.geom = function(posx,posy,width,height,color) {
 PIXI.Graphics.call(this,posx,posy,width,height,color);
 this.beginFill(color);
 this.drawRect(posx,posy,width,height)
}


SHAPE.geom.prototype = Object.create(PIXI.Graphics.prototype);
SHAPE.geom.prototype.constructor = SHAPE.geom;

var square=new SHAPE.geom(10,10,10,10,red)

var rect=new SHAPE.geom(200,400,80,30,blue)

rect.moveTo(100,100)

 container.addChild(square,rect);


 function animate() {

  requestAnimationFrame( animate );
  renderer.render(container);
 }

Answer 1

查看 PIXI 文档以了解 moveTo：https://pixijs.github.io/docs/PIXI.Graphics.html#moveTo

它将绘图位置移动到某个坐标，而不是实际已经存在的对象。因此，如果您使用 moveTo 并在绘制图形对象之后，它应该从该位置开始绘制。至少在理论上是这样（我从来没有使用过 moveTo）。

您应该使用对象的 .x、.y 或 .position 属性来设置您希望显示对象驻留在父容器中的位置。所以像： rect.x = 100; rect.y = 100; 要么 rect.position = 新 PIXI.Point(100, 100);

如果有任何问题，请告诉我，我会为您制作一个插件，为您提供一个工作示例。不幸的是，我现在没有时间。

一般来说，在 plunkr, jsfiddle 或类似的东西中制作像这样的简单示例也是个好主意。然后回答您的人可以轻松修改您的代码并向您展示一个可靠的示例。对双方都好。

Pixi.js 如何将 moveTo 与 OOP 对象一起使用？

Pixi.js how do you use moveTo with an OOP object?

javascript

oop

pixi.js