How to add rounded edges to a-plane (Aframe) Web VR - aframe

How can i add rounded edges/border radius to a a-plane?
<a-plane position="1 0.75 -3" geometry="width: 1.25; height: 1.25;depth: 1.25;"></a-plane>
i have to make a square with rounded edges

Rounded corners with a-plane is not possible. You can use the slice9 component

The "easy" suggestion in this case would be to create a rectangle graphic with rounded corners and save it as a png file. This image should be used as the texture of the plane.
Make sure that you use material="transparent:true" in the a-plane tag to ensure that no background shows behind the rounded corners.

As others have stated, if this is a one off and simply for visual effects, your best option is to make a custom texture and simply texture the plane.
However, if you require multiple or need it to interact with other elements, then you would be better off creating a custom geometry or component. There is an example on the three.js website on how to extrude a flat square into an beveled object. You could create a custom component and feed it the length and width, this would then let you use the regular material options on it too.

Related

Is there a way to create a hollowed circle in A-Frame?

I'm trying to build a Flower of Life VR example using A-Frame.
The closest thing that I found is using the opacity property in <a-circle>.
Is there a way to create just the border of the circle?
Not sure if it fits your use case but you could use a cylinder with a small height:
https://aframe.io/docs/1.0.0/primitives/a-cylinder.html
Or a tube:
https://github.com/donmccurdy/aframe-extras/tree/master/src/primitives
Or just a flat plane with png texture with a circle with transparency

Does the a-cursor of a-frame detect invisible entities?

Right now, the cursor does not seem to identify entities which are invisible. However, I can make visible entities become invisible using the animations.
Any way to do the inverse?
Thanks.
Try using making objects invisible using the material opacity rather than the entire object visible.
<a-entity material="opacity: 0"></a-entity>

How to draw rounded corners with QPainter::drawPolyLine

I'm trying to create a custom container widget at the moment using QGroupBox as a base and drawing the new frame in the paint event, which is all working fine using drawPolyLine to create it, but I'd like to draw the frame with rounded corners. Has anyone come across a way to do it with drawPolyLine or would I need to rewrite my code to implement them?
When it comes to custom flexible shapes, QPainterPath is the most powerful class of them all. You could for example use QPainterPath::arcTo() in order to draw single rounded corners, though painting the full shape might require some math.
Another possibility is defining single shapes and merging them using intersected() or subtracted(), as already suggested by cbamber85 in the comments.
QPen has a "Cap Style" option of Qt::RoundCap which could result in rounded corners depending on pen width.

All rounded corners TitleWindow in Flex?

how can i get a title window with all rounded courners, so that i may make it whole round or circular shape ?
i want shape like circle..
set the property: cornerRadius
default is 4
A couple of possible approaches:
If you are using Flex 4 (spark TitleWindow as opposed to the halo TitleWindow) you can create your own skin and assign that skin in CSS. In your custom skin you can draw the background however you want, including an Ellipse set to the width and height of the TitleWindow.
If you don't want to create a skin, or you are using a halo TitleWindow, you can create a circular mask and set it as the mask property on the TitleWindow. The downside to this approach is that you will probably clip the title and the close button (if it is visible), not to mention the contents as well.
Hope that helps, let me know if you need more details on either of these approaches.

Programmatic skins in Flex

I am having 2 problems creating programmatic skin for Canvas.
First problem:
I would like to have background with rounded corners and I am using GraphicsUtil.drawRoundRectComplex in order to have round corners for only the upper two corners. The problem is that drawRoundRectComplex takes for each corner one single parameter - the corner radius. However my scaleX and scaleY factors are different and in fact the corners are not properly rounded because I either can set the radius using scaleX or scaleY.
Graphics.drawRoundRect is better because it takes two parameters for the corners - elipse width and height and then you could apply both scale factors but it doesn't allow me to specify different radius for different corners.
I am looking for an idea how to use GraphicsUtil.drawRoundRectComplex when scaleX and scaleY are different.
Second problem:
Even though I set my programmatic skin through style - <> the skin's updateDisplayList gets executed only once and after that somehow "backgroundImage" style gets "undefined" and my programmatic skin is not associated anymore to the Canvas instance. As a workaround I am setting on each resize event "backgroundImage" style again but this is ugly.
What could cause such "silent" resetting of the "backgroundImage" style to undefined?
Thanks!
isnt the backgroundImage supported by the RectangularBorder Class?
Rectabgular Border at Adobe AS3 Reference

Resources