Pixi.js: Setting Graphics x, y values not consistent with first render (pixi.js: ^4.3.0)

Created on 3 Jan 2017 · 14Comments · Source: pixijs/pixi.js

Running live here https://alex-wilmer.github.io/pixitest/

https://github.com/alex-wilmer/pixitest/blob/master/src/index.js

I've created 3 Text nodes and 3 Graphics (circles). I'm using the exact same dynamic scale (d3.scaleLinear) to zoom in, and reset on button clicks.

When I click the "zoom" button, the Text nodes behave as I would suspect, expanding to the right a bit, and hitting "reset" puts them back where they started.

The Graphics, on the other hand, jump much further as if it was on its own larger stage, interestingly enough, hitting "zoom" doesn't set them back to their original position, but what seems to be original on this odd larger scale.

let ticks = []

let drawCircles = ({ data, scaleX, scaleY }) => {
  for (let [k, v] of data) {
    let [x, y] = xy(k)

    v.graphic = circle({
      color: 0x123456,
      x: scaleX(x),
      y: scaleY(y),
      r: 4,
    })

    stage.addChild(v.graphic)

    let sx = scaleX(x)
    let txt = text(sx)
    txt.x = sx
    txt.y = 10
    stage.addChild(txt)
    ticks.push({ x, text: txt })
  }
}

let mutateCircles = ({ data, scaleX }) => {
  for (let [k, v] of data) {
    let [x, y] = xy(k)

    // use the exact same scaleX(x) value for graphic.x and text.x
    v.graphic.x = scaleX(x)
    ticks.find(q => q.x === x).text.x = scaleX(x)
  }
}

code that creates the renderer.
https://github.com/alex-wilmer/pixitest/blob/master/src/view.js

I've tried forcing webgl and canvas and get the same behaviour for both.

circle function, nothing fancy here:

https://github.com/alex-wilmer/pixitest/blob/master/src/circle.js

import { Graphics } from 'pixi.js'

export default ({
  color,
  x,
  y,
  r,
}) => {
  let s = new Graphics()

  s.beginFill(color)
  s.drawCircle(x, y, r)
  s.endFill()

  return s
}

Let me know if I can add anything else, or help out in any ways.

oh and if someone can tell me why it's so blurry, that would be great too, thanks.

💾 v4.x (Legacy)

Source

alex-wilmer

Most helpful comment

This sets graphics.x on init; http://codepen.io/staff0rd/pen/wgvBaw?editors=1010

staff0rd on 3 Jan 2017

❤1 🎉1 👍1

All 14 comments

Hi @alex-wilmer!

Let me know if I can add anything else, or help out in any ways.

Reproducing this in a pen as a minimum verifiable example against the latest dev build will help a lot in isolating this issue.

oh and if someone can tell me why it's so blurry, that would be great too, thanks.

Not seeing any blur - screenshot?

staff0rd on 3 Jan 2017

Ok I'll make a pen. Here is what my screen looks like. The "ticks" are Text and circles are Graphics and they are significantly more blurry then normal text to the left

alex-wilmer on 3 Jan 2017

Regarding the blurring - check your browser's current zoom.

staff0rd on 3 Jan 2017

Yep, current zoom is normal, sweeping through zoom levels same blurriness across. Checked chrome, canary, firefox nightly all the same

alex-wilmer on 3 Jan 2017

Checked a secondary computer as well, same bluriness as in the screenshot. They're both retina displays, could that be it?

alex-wilmer on 3 Jan 2017

Possibly if you're doing some sort of scaling and/or texture generation. Clear on my machine where window.devicePixelRatio === 1;

staff0rd on 3 Jan 2017

Ok made my codepen http://codepen.io/alex-wilmer/pen/BpaaOb?editors=1010

exact same issue

couple things you can do to test here..

click reset btn a couple of times. nothing should happen as it mutates to the exact same scale value as it was initialized with, but the graphics move.

or click zoom, then reset to see that the circles do scale down, but not to where they started with.

The text behaves as expected though

alex-wilmer on 3 Jan 2017

Clicking reset for me does change stuff;