How to join Graphics and sprite

[roxor45]

Hello all,

 

Actually I try to create a draggable image with circle around.

so I don't know how join sprite and graphics function

first part , with draggable picture :

 

        var app = new PIXI.Application(800, 600, {backgroundColor : 0x1099bb});
        document.body.appendChild(app.view);
    
        // create a texture from an image path
        var texture = PIXI.Texture.fromImage('images/ppois.png');
    
        // Scale mode for pixelation
        texture.baseTexture.scaleMode = PIXI.SCALE_MODES.NEAREST;
    
            var bunny = new PIXI.Sprite(texture);
    
            // enable the bunny to be interactive... this will allow it to respond to mouse and touch events
            bunny.interactive = true;
    
            // this button mode will mean the hand cursor appears when you roll over the bunny with your mouse
            bunny.buttonMode = true;
    
            // center the bunny's anchor point
            bunny.anchor.set(0.5);
    
            // make it a bit bigger, so it's easier to grab
            bunny.scale.set(3);
    
            // setup events for mouse + touch using
            // the pointer events
            bunny
                .on('pointerdown', onDragStart)
                .on('pointerup', onDragEnd)
                .on('pointerupoutside', onDragEnd)
                .on('pointermove', onDragMove);
    
    
            // move the sprite to its designated position
            bunny.x = 100;
            bunny.y = 100;
    
            // add it to the stage
            app.stage.addChild(bunny)
          }

         
 

second part for create a circle :

 

     var graphics = new PIXI.Graphics();
    graphics.lineStyle(1, 0xFFBD01, 1);
    graphics.beginFill(0,0, 1);
    graphics.drawCircle(400, 250, 50);
    graphics.endFill();
     app.stage.addChild(graphics);

 

But how add this circle around this picture ??

thanks for your help

 

[ivan.popelyshev]

add it inside bunny, not inside stage.

[roxor45]

sorry I'm not understand, could you explain pls

[jonforum]

hi he mean 

app.stage.addChild(bunny)

bunny.addChild(graphics);

 

[roxor45]

thx for your help,

I try this, but same problem

    var bunny = new PIXI.Sprite(texture);

    bunny.interactive = true;
    bunny.buttonMode = true;
    bunny.anchor.set(0.5);
    bunny.scale.set(3);
    bunny
        .on('pointerdown', onDragStart)
        .on('pointerup', onDragEnd)
        .on('pointerupoutside', onDragEnd)
        .on('pointermove', onDragMove);

    bunny.x = 100;
    bunny.y = 100;
	
var graphics = new PIXI.Graphics();
    graphics.lineStyle(1, 0xFFBD01, 1);
    graphics.beginFill(0,0, 1);
    graphics.drawCircle(400, 250, 50);
    graphics.endFill();

    bunny.addChild(graphics);  //add to bunny

    app.stage.addChild(bunny); //stage bunny

 

[ivan.popelyshev]

drawCircle(0, 0, 50). 

What are your arguments to beginFill? Whats "0,0" ? shouldn't it be "0.0" ? Also, its black and that black will cover bunny. do you wan it to be behind bunny? Then you need additional container that will hold both sprite and graphics and you call that container "bunny" and move it.

[roxor45]

-for argument in beginfill ( 0,0) it's because I don't want a background for this circle. So after test I can delete this line 

so If I understand you , I need to create a PIXI.Container ?

[roxor45]

it's work !

 

thanks