I have EaselJS Shapes on the canvas and then I start drawing Graphics each tick. At the moment the graphics are being drawn over the Shapes. Is there a way to define the z-index so that the Shapes are drawn over the Graphics each frame?
Any help would be much appreciated.
To bring an DisplayObject to front after insertion just use this:
stage.setChildIndex( displayObject, stage.getNumChildren()-1);
The Canvas API has no built-in scene graph. Once something is drawn, the fact that it was drawn is forgotten, and there is no reference of the object tied to the canvas. This means that, if the object changes, the entire canvas could potentially need to be redrawn.
Thus, if you need your Shape objects to be drawn on top of your Graphics objects, just draw the Graphics before you draw the Shapes. You'll need to redraw the Shapes every time you redraw the Graphics.
You could also put both Shapes and Graphics into a Container, and use the indices of the Container to control the rendering order of the objects.
Edit: As noted by #stot's answer, it turns out that the Stage itself can be used to managed child indices. This is because the Stage extends the Container class, and thus inherits the methods of that class.
Related
Recently, I tried to realize a semi transparent surface in Qt3D. I put this semi transparent surface in the scene graph in Qt3D together with many other entities that should be draw. However, I found that the drawing order of the surface is not fixed, which seriously affect the blending effect.
How can I know the drawing sequence of the entities in the scene graph in Qt3D? Also, how can I make sure that my semi transparent surface was drawn last?
Thank you.
What you are looking for is the class QSortPolicy. You can set the sorting policy there to back to front, to draw the transparent surface last. Although, according to the documentation, the drawing order depends on when the entities appear in the scene graph, when no sorting policy is present.
Other than that, I found a frame/scene graph in Qt3D that showcases a transparent object here: https://github.com/alpqr/q3dpostproc. It's written in QML but you should be able to transfer it to C++ without much work.
I have many textured meshes so they must have different materials. It seems like there are only two ways to clip: globally, and per-material.
However, I want some visualizers to not be clipped (e.g. the plane I'm manipulating to define the clip planes), but all of the rest of the meshes are to be clipped. So I want to use global clipping, but to exempt the parts of the 3D UI (specific objects) from clipping. Is this possible?
I'm fairly certain that I can address this at the application level by separating the scenes so that i can issue the render of items i need clipped by using globally clipped functionality, and then clear out the clip planes and render a second scene containing UI elements prior to clearing the renderbuffers.
I have an image that is generated as an NSImage, and then I draw it into my NSView subclass, using a custom draw() method.
I want to modify this custom view so that the image is drawn in the same place, but it fades out on the side. That is, it's drawn as a linear gradient, from alpha=1.0 to alpha=0.0.
My best guess is one of the draw() variants with NSCompositingOperation might help me do what I want, but I'm having trouble understanding how they could do this. I'm not a graphics expert, and the NSImage and NSCompositingOperation docs seem to be using different terminology.
The quick version: pretty much this question but on macOS instead of Android.
You're on the right track. You'll want to use NSCompositingOperationDestinationOut to achieve this. That will effectively punch out the destination based on the alpha of the source being drawn. So if you first draw your image and then draw a gradient from alpha 0.0 to 1.0 with the .destinationOut operation on top, you'll end up with your image with alpha 1.0 to 0.0
Because that punch out happens to whatever is already in the backing store where the gradient is being drawn to, you'll want to be careful where/how you use it.
If you want to do this all within the drawing of the view, you should do the drawing of your image and the punch out gradient within a transparency layer using CGContextBeginTransparencyLayer and CGContextEndTransparencyLayer to prevent punching out anything else.
You could also first create a new NSImage to represent this faded variant, either using the drawingHandler constructor or NSCustomImageRep and doing the same image & gradient drawing within there (without worrying about transparency layers). And then draw that image into your view, or simply use that image with an NSImageView.
Basically, I'm trying to make a layering system with OpenGL|es that has to support layer hierarchies (layers can have sublayers and so on). When a layer has a parent, it has to be clipped to its parent layer when it is drawn. When all layers are rectangular, it is fairly straight forward and I can just work out the intersections and crop out the out of bounds bits. However, each layer can also have a transform matrix and if we transform a layer inside another layer, it will no longer be rectangular meaning that I can't just work out the intersections.
The illustration below shows the issue (the parent is in pink while the child is in light green):
For the above example, a glScissor call would be sufficient to set a rectangular bounding box but this will not do as the parent layer can also be transformed (so it will no longer be rectangular). Also, if a parent layer is transformed, the child's transform matrix is multiplied by the parent's before the child is rendered, therefore creating an illusion of the child being inside the parent even when it is transformed.
A few suggestions:
Clip the geometry of the sublayers yourself (fast but you need to do the math).
Render each layer into a texture (flexible but slow with many layers).
Use the stencil buffer (fill rate intensive with many layers).
I have started learning CANVAS. After i started drawing some basic shapes, i wanted to make some modifications to them. For example, I am confused of how to modify length and width of rectangle. Should i have to clear the canvas and redraw or can i capture the object of that rectangle like the objects in java script.
The canvas is a raster graphics surface. modifying length and width of a rectangle is a vector action. It is possible to scale a raster, but losses in quality can/will occur. You can use vector graphics in the form of SVG. But if it is only a rectangle, use a div with a border overlay-ed on your canvas.