[whatwg] Canvas roundedRect

Igor Trindade Oliveira itrindade.oliveira at gmail.com
Thu Jun 21 11:39:32 PDT 2012


Hi,

1)

http://qt-project.org/doc/qt-4.8/qpainter.html#drawRoundedRect

and Skia:

 /** Add a closed round-rectangle contour to the path
        @param rect The bounds of a round-rectangle to add as a closed contour
        @param rx   The x-radius of the rounded corners on the round-rectangle
        @param ry   The y-radius of the rounded corners on the round-rectangle
        @param dir  The direction to wind the round-rectangle's contour
    */
    void    addRoundRect(const SkRect& rect, SkScalar rx, SkScalar ry,
                         Direction dir = kCW_Direction);

The x and y radius are specified once.

2) Interesting. I will take a look.

On Thu, Jun 21, 2012 at 11:32 AM, Bronislav Klučka
<Bronislav.Klucka at bauglir.com> wrote:
> Hi,
>
> 1/ being able to specify every radius for every corner allows you to do what
> you have specified below, it doues not work other way... why would we want
> to close that path?
>
> 2/ try this
> http://test.bauglir.com/rr.php
>
>
> B.
>
>
> On 21.6.2012 20:02, Igor Trindade Oliveira wrote:
>>
>> Bronislav,
>>
>> Give me an use case where we need to specify the x and y radius for
>> every corner.
>> Almost all canvas 2d libraries today when drawing rounded rectangles
>> you need just specify
>> the corners once and it works pretty well.
>>
>> Igor
>>
>> On Thu, Jun 21, 2012 at 10:51 AM, Bronislav Klučka
>> <Bronislav.Klucka at bauglir.com>  wrote:
>>>
>>> Hi,
>>> So why do ve have rect? 4 lines could do it... simple enough...
>>>
>>> Canvas is for immediate raster graphics, SVG for retain vector graphics.
>>>  The use is a matter of choice, canvas have been used to create controls,
>>> graphs, diagrams... all could use round rect. But I agree, that idea
>>> below
>>> is not very well thought out.
>>> If we would go for round rect (RR), we need the obility to create RR
>>> paths
>>> and the ability to create each "corner" different - specify x and y
>>> radiuses
>>> for every "corner"
>>>
>>> Brona.
>>>
>>>
>>> On 21.6.2012 19:34, David Dailey wrote:
>>>>
>>>> It seems to me that the primary use of rounded rectangles is for UI's
>>>> rather
>>>> than art, and as such, SVG, that supports DOM and events, already has
>>>> syntax
>>>> for rounded rectangles. I have seen how the<canvas>    folks like to
>>>> re-invent
>>>> wheels, but the path syntax within canvas already should allow creation
>>>> of
>>>> line arc line arc sequences, and making things too easy would not appeal
>>>> to
>>>> the<canvas>    machismo would it?
>>>>
>>>> How many rounded rectangles have you ever seen that don't invite
>>>> mouseclicks? And then do you really want to try to calculate whether or
>>>> not
>>>> the mouse event is atop one of those thingies, particularly after it has
>>>> been rotated, scaled and skewed?
>>>>
>>>> I'm just not seeing why<canvas>    would need this.
>>>>
>>>> Regards
>>>> David
>>>>
>>>> -----Original Message-----
>>>> From: whatwg-bounces at lists.whatwg.org
>>>> [mailto:whatwg-bounces at lists.whatwg.org] On Behalf Of Igor Trindade
>>>> Oliveira
>>>> Sent: Thursday, June 21, 2012 12:59 PM
>>>> To: whatwg at lists.whatwg.org
>>>> Subject: [whatwg] Canvas roundedRect
>>>>
>>>> Currently, canvas2d does not have support for rounded rectangles and the
>>>> web
>>>> developers are implementing rounded rectangles using arcs or bezier
>>>> curves.[1][2] So i propose the addition of two new functions:
>>>>
>>>> void fillRoundedRect(unrestricted double x, unrestricted double y,
>>>> unrestricted double w, unrestricted double h, unrestricted double
>>>> xRadius,
>>>> unrestricted double yRadius); void strokeRoundedRect(unrestricted double
>>>> x,
>>>> unrestricted double y, unrestricted double w, unrestricted double h,
>>>> unrestricted double xRadius, unrestricted double yRadius);
>>>>
>>>> Where the xRadius and yRadius arguments specify the radii of the
>>>> ellipses
>>>> defining the corners of the rounded rectangle.
>>>>
>>>> Additionally, if we know that the path is a rounded rectangle, we can
>>>> make
>>>> optimizations in the graphics libraries reducing the amount of
>>>> tesselations.
>>>>
>>>> [1] http://www.scriptol.com/html5/canvas/rounded-rectangle.php
>>>> [2]
>>>>
>>>>
>>>> http://www.supercalifrigginawesome.com/Extending-Canvas-to-Draw-Rounded-Rect
>>>> angles
>>>>
>>>>
>>>>
>>> --
>>>
>>> s pozdravem
>>>         Bronislav Klučka
>>>
>>>
>>>
>>> http://www.bauglir.com<http://www.bauglir.com>
>>>
>>> http://www.bauglir.com
>>> Bronislav.Klucka at bauglir.com<mailto:Bronislav.Klucka at bauglir.com>
>>>
>>>  * webové aplikace
>>>  * software na zakázku
>>>
>>>
>
> --
>
> s pozdravem
>         Bronislav Klučka
>
>
>
> http://www.bauglir.com <http://www.bauglir.com>
>
> http://www.bauglir.com
> Bronislav.Klucka at bauglir.com  <mailto:Bronislav.Klucka at bauglir.com>
>
>  * webové aplikace
>  * software na zakázku
>
>



More information about the whatwg mailing list