rounded rectangle about ocanvas HOT 8 OPEN

Hi guys!

These last days I was fighting with a bug. Today I found it was caused by a typo — I missed a ! before a boolean expression 😅

Now I'm trying to clean the code, but I want to share with you this screenshot:

I tested the border-radius feature using fills and strokes with alpha. I also tested the clipChildren property — that's why you can see those little green rectangles. I compared it with the non-border-radius version of the rectangle, and here are the results.

Thank you very much for your support, guys :)

Greetings!

from ocanvas.

It’s a great idea! I don’t have the time to add such a thing though, but if you or anyone else is up for it I’d be happy to take it in! 👍

from ocanvas.

I saw this issue and it looks quite interesting to me. I was thinking in something like:

const rectangle = ocanvas.display.rectangle({
    // define it as a single number...
    borderRadius: 10, // px unit assumed
    // ... or define it as a border-radius CSS string...
    borderRadius: '10px',
    borderRadius: '10px 5px',
    borderRadius: '10px 5px 20px',
    borderRadius: '10px 5px 20px 15px',
    borderRadius: '10 5 20 15', // px unit assumed
    borderRadius: '10%', // percentage relative to width/height
    borderRadius: '10px 50%', // mixing px and percentages
    // ... or define it as an array instead of an space-separated string...
    borderRadius: [10, 5, 20, 15],
    borderRadius: ['10%', '5%'],
    borderRadius: ['10px', '5%'],
    // ... or define it like an object in a more JS way...
    borderRadius: {
        topLeft: 10,
        topRight: '5',
        bottomRight: '20px',
        bottomLeft: '15%'
        // not specified corners will be assumed to be 0px
    }
});

I think it's better to name it as borderRadius instead of radius in order to prevent confusion with Polygon's radius property. In fact, Polygon may have a borderRadius in the future as well. In addition, boderRadius is familiar for all who know the border-radius CSS property.

@darlanmendonca I would like to implement this feature, unless you want to do it by yourself. After all, it's your idea :)

from ocanvas.

I agree, borderRadius would be a better name. It would also be nice if it was defined as numbers, to allow the property to be animated for example. Maybe follow the naming of React Native which I guess takes its naming from CSS.

• borderRadius
• borderTopLeftRadius
• borderTopRightRadius
• borderBottomLeftRadius
• borderBottomRightRadius

The shapes supported in oCanvas also handle hit detection for mouse/touch within the edge of the shape, so it would also be great if hit detection handled the rounded corners :)

from ocanvas.

Hi guys!

I was working in this feature the last few days. It's almost done, but inside and outside strokes are giving me some headaches 😅

@koggdal I saw that you draw 2 rectangles: one for the fill (using rect() function) and another one for the stroke (using strokeRect() function). That's giving me some problems when I try to draw a round border and an inside stroke at the same time. A picture is worth a thousand words:

As you see, there are some pixels being drawn outside the stroke. After trying hard to fix it, I arrived to the conclusion that maybe it's better to draw one single rectangle for the fill and the stroke when a border-radius has to be drawn. The width and the height of the rectangle will be calculated considering the strokePosition and strokeWidth properties. Do you see any problem in this?

When no border-radius has to be drawn, rect() and strokeRect() functions are used as usual in order to get a best performance (when a border-radius has to be drawn, I have to draw the rectangle manually using the arcTo() function). Do you agree? :)

Cheers!

from ocanvas.

Awesome!

Not sure I fully understand what you mean by drawing a single rectangle? You can definitely use a fill to simulate the stroke, if that's what you mean :)

Optimizing the case of no border radius sounds good 👍

Btw, not sure of the state of that screenshot, but the inner edge of the stroke should also have a border radius, right?

from ocanvas.

@nestorrente sorry by delay, as time to show you, I could't do anything about it until now

@koggdal if I understand right, the print above is with bad render of borderRadius in red, is a result of draw tww rectangles, instead one.

if is helpful yet, my suggestion is draw a single rectangle, as you @nestorrente say above.

"
When no border-radius has to be drawn, rect() and strokeRect() functions are used as usual in order to get a best performance (when a border-radius has to be drawn, I have to draw the rectangle manually using the arcTo() function).
" - @nestorrente

I can't see any problems about draw a single rectangle with arcTo, in cases with borderRadius, and simple rect() and strokeRect() when not have borderRadius, since that feature draw rect with or without borderRadius, be a single function, looks. good

but @nestorrente you are very ahead with this feature, go ahead :D

from ocanvas.

Great work! Let's continue the discussion in the PR! :)

from ocanvas.