Jump to content

PixiJS and VueJS dragging graphic objects


Recommended Posts

I am trying to work with PixiJS events inside a Vue component following the example here:


Vue component template:

    <div ref="holder">
        <canvas id="pixi"></canvas>

Vue component script:


    import * as PIXI from 'pixi.js'

    export default {
        data() {
           app: null,
           widgets: [
             {x: 5, y: 20}, {x: 55, y: 120}, {x: 245, y: 220}, {x: 415, y: 435},
        mounted () {
            var canvas = document.getElementById('pixi')
            let app = new PIXI.Application({
                                                width: 500,
                                                height: 500,
                                                antialias: true,
                                                transparent: true,
                                                view: canvas

            let sprite = new PIXI.Sprite.from("../assets/img/canvas.jpg");
            sprite.width = this.$refs.holder.clientWidth;
            sprite.height = this.$refs.holder.clientHeight;

            this.widgets.forEach(widget => {
                let graphics = new PIXI.Graphics();
                graphics.height = 24;
                graphics.width = 24;
                graphics.beginFill(0x1278BA, 1)
                graphics.drawCircle(0, 0, 12);
                graphics.buttonMode = true;
                graphics.interactive = true;
                graphics.hitArea = new PIXI.Circle(0, 0, 12);

                graphics.position.x = widget.x;
                graphics.position.y = widget.y;
                        .on("click", this.widgetClick),
                        .on('mousedown', this.widgetDragStart)
                        .on('touchstart', this.widgetDragStart)
                        // events for drag end
                        .on('mouseup', this.widgetDragEnd)
                        .on('mouseupoutside', this.widgetDragEnd)
                        .on('touchend', this.widgetDragEnd)
                        .on('touchendoutside', this.widgetDragEnd)
                        // events for drag move
                        .on('mousemove', this.widgetDragMove)
                        .on('touchmove', this.widgetDragMove);

       methods: {
           widgetClick: function(e) {
               console.log("click", e.target)
           widgetDragStart: function(e) {
               console.log("start", this, e.target);
               this.data = e.data;
               this.alpha = 0.5;
               this.dragging = true;
           widgetDragEnd: function(e) {
               console.log("end", e);
               this.alpha = 1;
               this.dragging = false;
               // set the interaction data to null
               this.data = null;
           widgetDragMove: function(e) {
               console.log("move", e);
               if (this.dragging)
                   var newPosition = this.data.getLocalPosition(this.parent);
                   this.position.x = newPosition.x;
                   this.position.y = newPosition.y;


Issues I have are

In the drag event handlers 'this' is the Vue context, I can't see how it could ever be a Pixi object / context even if this was decoupled from a Vue component.
So in the dragmove eventhandler as it stands above it fails with as this.parent is undefined

If I change the documented example for the drag move event handler to be like below dragging one widget drags all the widgets together:

widgetDragMove: function(e) {
    if (this.dragging)
         var newPosition = this.data.getLocalPosition(e.currentTarget);
         e.currentTarget.position.x = newPosition.x;
         e.currentTarget.position.y = newPosition.y;


Link to comment
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.

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.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...