Sign in to follow this  
roxor45

How to join Graphics and sprite

Recommended Posts

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

 

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.