Hooman Askari

  • Content Count

  • Joined

  • Last visited

  • Days Won


Hooman Askari last won the day on July 25 2019

Hooman Askari had the most liked content!

About Hooman Askari

  • Rank

Contact Methods

  • Website URL
  • Twitter

Profile Information

  • Gender
  • Location
  1. That is a good point and it might work, but the problem is (IMHO the biggest problem in Pixijs) that it's going to be inconsistent between different types of graphics. (there has been a big debate about anchors and pivots in pixi for a long time, which is part of this inconsistency). For example, circles and ellipses are being drawn like that right now, but what about polygons and polylines, etc. I also have containers with image sprites inside them, because I need to group them, and the technique would not work for them.
  2. Here you go: https://jsfiddle.net/human_a/1snmk829/ In this fiddle, you can do the grouping, rotating, scaling and ungrouping via the buttons on top of the canvas. Turns out the issue is caused by the pivot point. If I set it to anything other than 0, 0 it's gonna mess up everything. Try clicking the group, ungroup buttons without rotating or scaling, it is still messing it up every time you press them. Edit: Also, when using it with pixi-viewport, the zoom, pan of the viewport affects the scale, angle, and position after ungrouping. Any ideas?
  3. I'll try to replicate and share it here. I am experimenting with it now to find out the reason why it's not working.
  4. It doesn't seem to work for me. It messes up with the position and doesn't get the angle at all, the scale is also wrong. I am using pixi-viewport and I am trying to understand if it's caused by that or not.
  5. Thanks. Btw, the question is for pixijs not threejs, unless you have a different point.
  6. I did run some tests, and it does not work. The code above does not yield the correct position, and even if it does, toLocal and toGlobal, return a point, with x and y, which can only be used for positioning. As I mentioned the position is already fixed for me, by saving the move delta and then adding it to the Graphics X and Y once they are moved out of the Container. My main confusion is about the angle. There does not seem to be a correct way to calculate it, even though the Graphic is already painted on the canvas with the desired angle. What I am after is behavior like Fabric.js where you can multi-select objects in the canvas (in Fabric.js it puts them inside a container and removes them from it and add them back to the main stage on deselect) but it preserves the angle, scale, and position.
  7. The position is the easiest part, which I have already fixed, via caching the moving delta. Does this `toLocal `and `toGlobal` work for the angle too? What about scale?
  8. Hi I am trying to move a Graphic out of its Container and add it into the main stage, but once it's done, the position, angle, and scale of the Graphic are reset back to whatever was the default info of the Graphic before it was added to the Container. The container is interactive, can be moved, scaled and rotated. Is there a way to preserve that information, most importantly the angle (or rotation) of the Graphics after they are moved to another container, in this case, the main stage?
  9. Yes I can also confirm the Canvas implementation is also broken, the attempt on redrawing Graphics (clearing and refilling) will set the fill color to black, no matter what.
  10. Just an update on the matters, updating lineStyle in geometry.graphicsData and setting dirty and clearDirty to dirty works if forceCanvas is set to true.
  11. Awesome, at least I did something useful here
  12. With that said, is there an easy way to clone and edit a Graphics element? For example if I have the following: let roundedRectangle = new PIXI.Graphics(); roundedRectangle.lineStyle(1, 0xFF00FF, 1); roundedRectangle.name = 'roundedRectangle'; roundedRectangle.selectable = true; roundedRectangle.angle = 0; roundedRectangle.drawRoundedRect(0, 0, 100, 100, 16); this.setPivotToCenter(roundedRectangle); roundedRectangle.position.set(700 + roundedRectangle.pivot.x, 500 + roundedRectangle.pivot.y); roundedRectangle.hitArea = roundedRectangle.getLocalBounds(); this.viewport.addChild(roundedRectangle); Now when I scale it, I would like to clear, refill and keep all of the styles, but I want to resize the shape and keep the lineStyle width at 1px. I am looking for something built-in, if it does not exist, I will create my own.
  13. Oh, I did not know that thanks for clarifying it, actually clearing and refilling could work for us since it's fast enough to look seamless to the user. Shapes are just a small part of our app, we mostly deal with images, for which pixijs is the best possible solution out there, I tried almost all of them, none worked better than pixijs. I just hope the support for vectors and shapes become better for pixijs in future (I mean the things that are possible of course) I should extend the classes perhaps. I will share them if I achieved anything useful Thanks for the help and clarifications.
  14. I am creating a graphic design app with pixijs, migrating my existing app from Fabricjs. I need this feature so that 1) Users can easily edit shapes, 2) When I change width and height in pixijs it is scaling the shapes, and I need to change the border thickness to match the new scale (scale.x * lineStyle.width or something like that) You can see a live example of this in mirro.com (former realtimeboard.com) which I believe are using pixijs (look at the source code, the canvas is wrapped in a div named pixiContainer) and perhaps they are still using V4 Lack of this feature will force me to either use V4 or give up on pixijs (which is a shame because it is awesome)