Scroll/clip rect in pixijs

[ianharrigan]

Hi All,

 

I have a quick question that ive been battling with for most of the day, is there an easy way to create a "scrollRect" for a pixi graphics object? I mean something along the lines of:

 

myGraphics.scrollRect = new Rectangle(10, 10, 100, 100);

 

That would then basically clip the while display object from x=10, y=10, cx=100, cy=100. Masks seem complete overkill here and really hard to manage, as when you move the graphics object you also have to move the mask... unless im mistaken? It seemed that the mask couldnt be added to the actual graphics object and thus its position was all out of sync with the display object. Is this something that exists but i just couldnt find it?

 

In the above example, if you move the display object to, say, 300x300 then the clip rect would be unaffected. Ive also thought that i might be able to implement this by creating a new texture of itself and drawing that based on the clip rect, i havent tried this and this may work, but it seems expensive and figured i would ask incase there is a much simpler method.

 

Thanks in advance,

Ian

[xerver]

The mask should be relative to the location of the object.

[ianharrigan]

Hi,

 

Maybe (probably), im doing something totally wrong then... Take this example: http://jsfiddle.net/4wjysxq3/2/

 

It certainly doesnt behave as i would expect, and the coords of the mask dont seem to be relative to the object its masking. Am i doing something totally stupid? (Im very new to pixi so its probably the case)...

 

Thanks for the reply!

 

Cheers,

Ian

[xerver]

The reason you see some border being cutoff is because the border line is draw with the middle of the line at the 0 position. So the line actually bleeds outside the box, and the mask therefore cuts it off.

 

Wow, I also realized you are using v1.3.0 for this example. Please try it with the latest pixi (v3.0.7). The version you are using is years old.

[ianharrigan]

Ahhh, good point, i hadnt even tried another version... Doh!

 

Ill try again with a newer version and see what i am using locally also.

 

Thanks!

Ian

[ianharrigan]

Ok, so now im using the latest version from github, and i still get strange results: http://jsfiddle.net/4wjysxq3/3/

 

Any ideas?

[fidoogle]

Hello, did you ever figure out how to do that "scrollRect"? I think I have a similar issue. I build this: https://fierce-dawn-33751.herokuapp.com/pages/ekgPixi.html Each view is a separate canvas and I followed this example: https://bl.ocks.org/pkerpedjiev/cf791db09ebcabaec0669362f4df1776 Notice how you can zoom and pan on each view and they are all in sync. 

Now the trouble is that I need to add more views and I get this error: "Too many active webgl contexts. oldest context will be lost"

I figured I should be using ONE canvas and each view should be a "scrollRect" with masking/clipping but I'm stuck and can't find good masking/clipping examples to follow.

If you have any advice, please let me know. Thank you.

[ivan.popelyshev]

I tried to do something like that, and I succeeded in my previous fork of pixi: https://gameofbombs.github.io/pixi-bin/index.html?s=camera&f=mirror.js&title=2 bunnies 2 cameras  . However, its not safe for newbies. But if you describe your case in details, we can thing of something

[fidoogle]

This is concerning this demo: https://fierce-dawn-33751.herokuapp.com/pages/ekgPixi.html

So the rounded corner rectangles are different views, each with its own data points (5k points each) collected over 5 seconds. There's 12 views so that's 60k datapoints. (ultimately, it will be for 10 seconds worth of data, or 120k datapoints). The user must be able to pan/zoom and the views must stay synchronized.

I used separate canvases for each view but it might be better to have one huge canvas that will have 12 inner rectangles that will mask/clip the data within so that the user experience will be the same as in my demo. I figure this might be more efficient for the GPU.

Now my problem is, how do I begin to code that? I can't find any examples to follow.

[fidoogle]

Someone gave me a clue here: 

https://gitter.im/pixijs/pixi.js?at=59bfdf3ab59d55b8230f5248

[fidoogle]

Update: I used 12 rounded rectangles as masks applied to the same containers as the charts. In other words each container contains a rounded rectangle mask positioned on the parent stage at particular (x,y). The container also contains the chart (trace and gridlines). I had to position the charts to the correct (x,y) to start within each mask, otherwise the charts would start at (0,0) of the parent stage. The result is here:  https://fierce-dawn-33751.herokuapp.com/pages/ekgPixi.html

Another thing I fixed was to increase the width of the parent stage. My charts have 5k datapoints, one point per pixel, so my parent stage is at least 5k pixels wide. I previously had my parent stage to be the width of my browser window but this had a high gpu utilization since it had to interpolate the 5k datapoints to fit within the smaller window width. Now each pixel corresponds to one datapoint along the x-axis.

[ivan.popelyshev]

> one point per pixel, so my parent stage is at least 5k pixels wide

I dont see how it can affect anything, also stage has no "width", there's no "wide" in pixi at all. When something is masked, bounds are calculated both of mask and what was inside, so really it only draws pixels that fit the mask rectangle bounds.

You cant just change "width", it actually changes "scale", and .. I dont know how to explain that  May be you actually changed the number of points in graphics - and that helped, but if you look at neighbour threads about graphics - there was a case like that just a week ago. Static graphics cost is different from dynamic graphics, please read it carefully.