var rectangle = new Graphics(); rectangle.beginFill(0, 0.001); rectangle.lineStyle(1, 0xFF0000); rectangle.drawRect(5, 5, 200, 100); rectangle.interactive = true; rectangle.buttonMode = true; rectangle.on('pointerdown', onDragStart) .on('pointerup', onDragEnd) .on('pointerupoutside', onDragEnd) .on('pointermove', onDragMove); app.viewport.addChild(rectangle);Estoy usando este código para crear un rectángulo y agregarlo al rectángulo. Esta es la función onDragMove
function onDragMove() { if (this.dragging) { const newPosition = this.data.getLocalPosition(this.parent); this.width = newPosition.x; this.height = newPosition.y; } }Básicamente, esto es cambiar su ancho y alto, pero también quiero arrastrar el rectángulo cuando se hace clic dentro del rectángulo y se arrastra en la pantalla. ¿Alguna sugerencia de cómo puedo lograr esto?
Creé un ejemplo de trabajo de arrastrar y cambiar el tamaño: https://www.pixiplayground.com/#/edit/SbpTjm7WKXbL51kmiG89W - verifique.
Basándome en este ejemplo, creo que puede implementar el cambio de tamaño de otros bordes del rectángulo, etc. :)
Una nota: mire la función drawRectangle :
function drawRectangle(rectangle) { rectangle.clear(); rectangle.beginFill(0, 0.001); rectangle.lineStyle(1, 0xFF0000); rectangle.drawRect(rectangle.myRectanglePosition[0], rectangle.myRectanglePosition[1], rectangle.myRectanglePosition[2], rectangle.myRectanglePosition[3]); } ^ el rectangle.clear(); se llama para volver a dibujar el objeto PIXI.Graphics . Entonces, en cada cuadro, lo borramos y lo dibujamos nuevamente en una posición específica con un ancho y alto específicos.