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 |
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 |
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 |
In reply to this post by Josef Springer
On Oct 28, 2010, at 7:32 AM, Josef Springer wrote:
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 |
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 |
Free forum by Nabble | Edit this page |