How to draw a rectangle with rounded corners ?

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|

How to draw a rectangle with rounded corners ?

Josef Springer
Hello everybody,

i have a graphical question, may be anybody can give me an assist:

I want to draw a rectangle with rounded corners. "aGrahicsContext
joinStyle: GraphicsContext joinRound" does not work for me, because the
width of the rectangle's border is < 5 and so makes no good visual
picture. I want to use smooth round corners for the rectangle so, i must
use soething like class EllipticalArc, i think. Where can i find
examples of drawing reclangle with smooth rounded corners ?

thanks for help,
Josef Springer

_______________________________________________
vwnc mailing list
[hidden email]
http://lists.cs.uiuc.edu/mailman/listinfo/vwnc
Reply | Threaded
Open this post in threaded view
|

Re: How to draw a rectangle with rounded corners ?

Steffen Märcker
Hi,

some time ago I tried this and used a polyline as approximation:


"rounded Rectangle"

        rect := OrderedCollection new: 50.
        (self roundedCorners: rectDict sweep: 90)
                do: [:c | rect addAll: c asPolyline vertices].
        rect add: rect first.
        OrderedCollection with: (Polyline vertices: rect)

roundedCorners: rectDict sweep: sweepAngle
        "Liefert die gerundeten Ecken des Rectangle als Collection von  
EllipticArcs."

        | x y width height rx ry dx dy box corners points |
        x := rectDict at: #x.
        y := rectDict at: #y.
        width := rectDict at: #width.
        height := rectDict at: #height.
        rx := rectDict at: #rx.
        ry := rectDict at: #ry.
        dx := rx * 2.
        dy := ry * 2.
        box := 0 @ 0 extent: dx @ dy.
        corners := (180 to: 450 by: 90) collect:
                                        [:angle |
                                        EllipticalArc
                                                boundingBox: box
                                                startAngle: angle
                                                sweepAngle: sweepAngle].
        points := (OrderedCollection new: 4)
                                add: x @ y;
                                add: (x + width - dx) @ y;
                                add: (x + width - dx) @ (y + height - dy);
                                add: x @ (y + height - dy);
                                yourself.
        points
                doWithIndex: [:p :i | corners at: i put: ((corners at: i) translatedBy:  
p)].
        ^corners

Regards,
Steffen



Am 28.10.2010, 16:32 Uhr, schrieb Josef Springer  
<[hidden email]>:

> Hello everybody,
>
> i have a graphical question, may be anybody can give me an assist:
>
> I want to draw a rectangle with rounded corners. "aGrahicsContext
> joinStyle: GraphicsContext joinRound" does not work for me, because the
> width of the rectangle's border is < 5 and so makes no good visual
> picture. I want to use smooth round corners for the rectangle so, i must
> use soething like class EllipticalArc, i think. Where can i find
> examples of drawing reclangle with smooth rounded corners ?
>
> thanks for help,
> Josef Springer
>
> _______________________________________________
> vwnc mailing list
> [hidden email]
> http://lists.cs.uiuc.edu/mailman/listinfo/vwnc
_______________________________________________
vwnc mailing list
[hidden email]
http://lists.cs.uiuc.edu/mailman/listinfo/vwnc
Reply | Threaded
Open this post in threaded view
|

Re: EXTERNAL: How to draw a rectangle with rounded corners ?

Stevenson, Dave (contr)
In reply to this post by Josef Springer
The HotDraw framework contains RoundedRectangleFigure. See methods
#arcs, #displayFilledOn: and #displayOutlineOn:.

Note that while a HotDraw drawing can be displayed in VisualWorks, its
framework has significant differences from the VisualWorks graphics
framework. Nonetheless, the display methods should be instructive. In
particular, the class maintains an inset ivar, which is used to generate
4 quarter-circle EllipticalArcs, one for each corner (see #arcs).

Load the 'HotDraw' parcel from the contributed directory.

Stevenson, Dave (contr) <[hidden email]>
Smalltalk Developer
Manufacturing Execution System (MES) / Shop Floor Control
El Segundo: 310-524-5771



-----Original Message-----
From: [hidden email] [mailto:[hidden email]] On
Behalf Of Josef Springer
Sent: Thursday, October 28, 2010 7:32 AM
To: VisualWorks non commercial mailing list
Subject: EXTERNAL:[vwnc] How to draw a rectangle with rounded corners ?

Hello everybody,

i have a graphical question, may be anybody can give me an assist:

I want to draw a rectangle with rounded corners. "aGrahicsContext
joinStyle: GraphicsContext joinRound" does not work for me, because the
width of the rectangle's border is < 5 and so makes no good visual
picture. I want to use smooth round corners for the rectangle so, i must

use soething like class EllipticalArc, i think. Where can i find
examples of drawing reclangle with smooth rounded corners ?

thanks for help,
Josef Springer

_______________________________________________
vwnc mailing list
[hidden email]
http://lists.cs.uiuc.edu/mailman/listinfo/vwnc

_______________________________________________
vwnc mailing list
[hidden email]
http://lists.cs.uiuc.edu/mailman/listinfo/vwnc
Reply | Threaded
Open this post in threaded view
|

Re: How to draw a rectangle with rounded corners ?

Travis Griggs-4
In reply to this post by Josef Springer
On Oct 28, 2010, at 7:32 AM, Josef Springer wrote:

Hello everybody,

i have a graphical question, may be anybody can give me an assist:

I want to draw a rectangle with rounded corners. "aGrahicsContext
joinStyle: GraphicsContext joinRound" does not work for me, because the
width of the rectangle's border is < 5 and so makes no good visual
picture. I want to use smooth round corners for the rectangle so, i must
use soething like class EllipticalArc, i think. Where can i find
examples of drawing reclangle with smooth rounded corners ?

For standard VisualWorks, you'll have to do the work yourself. It's common to do as HotDraw has done and create a subclass of Rectangle with a fillet/round instance variable, and then define it's strokeOn:/fillOn: methods appropriately. What is appropriate for your context depends.

If your expected rounding is low, then you can just cut diagonal corners. The various "rounded" shapes drawn in the various new tools (prerequisite, bundle structure, and comparison) are all done so. Something like

poly := (OrderedCollect new) add: (myRect topLeft rightBy: 3); add: (myRect topRight leftBy: 3); add: (myRect topRight downBy: 3); add: (myRect bottomRight upBy: 3); add: (myRect bottomRight leftBy: 3); add: (myRect bottomLeft rightBy: 3); add: (myRect bottomLeft upBy: 3); add: (myRect topLeft downBy: 3); add: (myRect topLeft rightBy: 3); yourself.

and then either aGC displayPolyline: poly or aGC displayPolygon:

If you have corners bigger than that, you end up righting a nice display method which draws four wedges/arcs for the separate corners and lines between them (or rectangles between them). It's fun (not so) to make sure you get the rounding right so the rounding lines up right.

If you're willing to use CairoGraphics you can do:

aGC newCairoContextWhile: [:cr | cr rectangle: myRect fillet: myCornerRadius; source: ColorValue whatever; stroke (or fill)]

It'll draw a first class properly anti-aliased rounded rectangle, as a single path entity. The fact that you could fill/stroke it with a pattern or a gradient, or rotate/scale/skew/transform it arbitrarily is just icing. :) Did I mention that not only can you draw rounded rectangles with Cairo, but that you can use them as clip regions too?

--
Travis Griggs
Objologist
Light travels faster than sound. This is why some people appear bright until you hear them speak...





_______________________________________________
vwnc mailing list
[hidden email]
http://lists.cs.uiuc.edu/mailman/listinfo/vwnc
Reply | Threaded
Open this post in threaded view
|

Re: How to draw a rectangle with rounded corners ?

Maarten Mostert-2
Hi,

If you use Cairo you can file in the enclosed extra handy path:

You can use it in the following way.

aCR
sourceRed: 0.22
green: 0.34
blue: 1
alpha: 0.7.
aRectangle := Rectangle origin: aStartPoint x @ (aStartPoint y - halfHeight)
corner: (aStartPoint x + aWidth) @ (aStartPoint y + halfHeight).
aCR rectangle: aRectangle fillet: 3 * printScale.
aCR fill.

Regards,

@+Maarten,

PS Why not keep it within the library ?



> Message du 29/10/10 07:07
> De : "Travis Griggs"
> A : "VisualWorks non commercial mailing list"
> Copie à :
> Objet : Re: [vwnc] How to draw a rectangle with rounded corners ?
>
> On Oct 28, 2010, at 7:32 AM, Josef Springer wrote:
>
> > Hello everybody,
> >
> > i have a graphical question, may be anybody can give me an assist:
> >
> > I want to draw a rectangle with rounded corners. "aGrahicsContext
> > joinStyle: GraphicsContext joinRound" does not work for me, because
> > the
> > width of the rectangle's border is < 5 and so makes no good visual
> > picture. I want to use smooth round corners for the rectangle so, i
> > must
> > use soething like class EllipticalArc, i think. Where can i find
> > examples of drawing reclangle with smooth rounded corners ?
>
> For standard VisualWorks, you'll have to do the work yourself. It's
> common to do as HotDraw has done and create a subclass of Rectangle
> with a fillet/round instance variable, and then define it's strokeOn:/
> fillOn: methods appropriately. What is appropriate for your context
> depends.
>
> If your expected rounding is low, then you can just cut diagonal
> corners. The various "rounded" shapes drawn in the various new tools
> (prerequisite, bundle structure, and comparison) are all done so.
> Something like
>
> poly := (OrderedCollect new) add: (myRect topLeft rightBy: 3); add:
> (myRect topRight leftBy: 3); add: (myRect topRight downBy: 3); add:
> (myRect bottomRight upBy: 3); add: (myRect bottomRight leftBy: 3);
> add: (myRect bottomLeft rightBy: 3); add: (myRect bottomLeft upBy: 3);
> add: (myRect topLeft downBy: 3); add: (myRect topLeft rightBy: 3);
> yourself.
>
> and then either aGC displayPolyline: poly or aGC displayPolygon:
>
> If you have corners bigger than that, you end up righting a nice
> display method which draws four wedges/arcs for the separate corners
> and lines between them (or rectangles between them). It's fun (not so)
> to make sure you get the rounding right so the rounding lines up right.
>
> If you're willing to use CairoGraphics you can do:
>
> aGC newCairoContextWhile: [:cr | cr rectangle: myRect fillet:
> myCornerRadius; source: ColorValue whatever; stroke (or fill)]
>
> It'll draw a first class properly anti-aliased rounded rectangle, as a
> single path entity. The fact that you could fill/stroke it with a
> pattern or a gradient, or rotate/scale/skew/transform it arbitrarily
> is just icing. :) Did I mention that not only can you draw rounded
> rectangles with Cairo, but that you can use them as clip regions too?
>
> --
> Travis Griggs
> Objologist
> Light travels faster than sound. This is why some people appear bright
> until you hear them speak...
>
>
>
>
>
>
> [ (pas de nom de fichier) (0.1 Ko) ]
_______________________________________________
vwnc mailing list
[hidden email]
http://lists.cs.uiuc.edu/mailman/listinfo/vwnc

CairoContext-rectanglefillet.st (1K) Download Attachment