javascript - 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

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

您应该使用对象 .x、.y 或 .position 属性来设置显示对象在父容器中的驻留位置。所以像这样: 矩形.x = 100; 矩形.y = 100; 或者 rect.position = new PIXI.Point(100, 100);

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

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