Hi ,
I'm new to PIXI and I'm trying to create a dynamically changing column of lines using PIXI v5 .
Lets say I would like to have 4 lines that will be placed in 10 vertically aligned positions.
The 4 line types have different colors and length .
The bottom position ( pos 0 ) should change on event, lets say on click and push the others up , the last position (10) should disappear from the group.
As I dont think drawing 10 lines is optimal , I'm trying to find a way to re-use a single line Graphics.
Not sure what the best approach should be - use line images and create sprites from them then position them in the canvas ?
Or create a single line and clone it every time , then change its color , length , position ?
Also should it be a graphic , sprite or texture ?
So far I have tried :
Created a function to draw lines , but it
blueLine = new PIXI.Graphics()
purpleLine = new PIXI.Graphics()
pinkLine = new PIXI.Graphics()
cyanLine = new PIXI.Graphics()
this.drawLine(this.blueLine,2, 0x008aff, {x:400, y:470},{x:260, y:0},{x:300, y:0})
this.drawLine(this.purpleLine,2, 0x991bfa, {x:400, y:480},{x:240, y:0},{x:300, y:0})
this.drawLine(this.pinkLine,2, 0xf55497, {x:400, y:500},{x:220, y:0},{x:300, y:0})
this.drawLine(this.cyanLine,2, 0x17c3b2, {x:400, y:490},{x:200, y:0},{x:300, y:0})
drawLine(newLine,thickness: number, color: number, position: {x:number,y:number}, moveTo: {x:number,y:number},lineTo: {x:number,y:number} ) {
this.app.stage.addChild(newLine)
newLine.lineStyle(thickness, color)
.moveTo(moveTo.x, moveTo.y)
.lineTo(lineTo.x,lineTo.y)
newLine.position.set(position.x,position.y)
}
This works for 4 lines , but then how to create clones to continue drawing them on the screen ?
Should I create a Texture or Sprite from each of them and re-use it by creating new line ?
I have also tried to create a Sprite :
this.drawLine(this.line,10, 0x008aff, {x:0, y:470},{x:260, y:0},{x:300, y:0})
let lineTexture = this.app.renderer.generateTexture(this.line)
let lineSprite = new PIXI.Sprite(lineTexture)
lineSprite.x = 110
lineSprite.y = 200
this.lineContainer.addChild(lineSprite)
this.app.stage.addChild(this.lineContainer)
But it doesn't appear on the app stage , what am I doing wrong ?
Thanks