Quantcast
Channel: Pixi.js Latest Topics
Viewing all articles
Browse latest Browse all 3978

Re-using a line graphics

$
0
0

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 .

image.png.06011c259dc0151ae51da855afb3d06d.png

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

 

 


Viewing all articles
Browse latest Browse all 3978

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>