This Question is Assumed Answered

1 "correct" answer available (5 pts) 15 "helpful" answers available (3 pts)
1 Replies Last post: Jul 8, 2008 1:51 AM by carl

How to make a rounded-corner graphic have a rounded-corner border?

Jul 8, 2008 1:33 AM

Click to view Mirror's profile Level 1 Mirror 12 posts since
Jul 2, 2008

how to make a rounded-corner graphic have a rounded-corner border?


{curl 6.0 applet}
{curl-file-attributes character-encoding = "shift-jis"}

{let r:double = 0.2,
Graphic-Width:double = 5,
Graphic-Height:double = 2,
Distance-Width:Distance = 5cm,
Distance-Height:Distance = 2cm,
Temp-Width:double = Graphic-Width - r,
Temp-Height:double = Graphic-Height - r
}
{let BackGraphic:PolygonGraphic = {PolygonGraphic
width = Distance-Width,
height = Distance-Height,
border-width = 1pt,
border-color = "black",
color = "lime",
{Fraction2d r - r*{cos 0degrees},Temp-Height + r*{sin 0degrees}}, {Fraction2d r - r*{cos 10degrees},Temp-Height + r*{sin 10degrees}},
{Fraction2d r - r*{cos 20degrees},Temp-Height + r*{sin 20degrees}},{Fraction2d r - r*{cos 30degrees},Temp-Height + r*{sin 30degrees}},
{Fraction2d r - r*{cos 40degrees},Temp-Height + r*{sin 40degrees}},{Fraction2d r - r*{cos 50degrees},Temp-Height + r*{sin 50degrees}},
{Fraction2d r - r*{cos 60degrees},Temp-Height + r*{sin 60degrees}},{Fraction2d r - r*{cos 70degrees},Temp-Height + r*{sin 70degrees}},
{Fraction2d r - r*{cos 80degrees},Temp-Height + r*{sin 80degrees}},{Fraction2d r - r*{cos 90degrees},Temp-Height + r*{sin 90degrees}},
{Fraction2d Temp-Width + r*{cos 90degrees},Temp-Height + r*{sin 90degrees}},{Fraction2d Temp-Width + r*{cos 80degrees},Temp-Height + r*{sin 80degrees}},
{Fraction2d Temp-Width + r*{cos 70degrees},Temp-Height + r*{sin 70degrees}},{Fraction2d Temp-Width + r*{cos 60degrees},Temp-Height + r*{sin 60degrees}},
{Fraction2d Temp-Width + r*{cos 50degrees},Temp-Height + r*{sin 50degrees}},{Fraction2d Temp-Width + r*{cos 40degrees},Temp-Height + r*{sin 40degrees}},
{Fraction2d Temp-Width + r*{cos 30degrees},Temp-Height + r*{sin 30degrees}},{Fraction2d Temp-Width + r*{cos 20degrees},Temp-Height + r*{sin 20degrees}},
{Fraction2d Temp-Width + r*{cos 10degrees},Temp-Height + r*{sin 10degrees}},{Fraction2d Temp-Width + r*{cos 0degrees},Temp-Height + r*{sin 0degrees}},
{Fraction2d Temp-Width + r*{cos 0degrees},r - r*{sin 0degrees}}, {Fraction2d Temp-Width + r*{cos 10degrees},r - r*{sin 10degrees}},
{Fraction2d Temp-Width + r*{cos 20degrees},r - r*{sin 20degrees}},{Fraction2d Temp-Width + r*{cos 30degrees},r - r*{sin 30degrees}},
{Fraction2d Temp-Width + r*{cos 40degrees},r - r*{sin 40degrees}},{Fraction2d Temp-Width + r*{cos 50degrees},r - r*{sin 50degrees}},
{Fraction2d Temp-Width + r*{cos 60degrees},r - r*{sin 60degrees}},{Fraction2d Temp-Width + r*{cos 70degrees},r - r*{sin 70degrees}},
{Fraction2d Temp-Width + r*{cos 80degrees},r - r*{sin 80degrees}},{Fraction2d Temp-Width + r*{cos 90degrees},r - r*{sin 90degrees}},
{Fraction2d r - r*{sin 0degrees},r - r*{cos 0degrees}}, {Fraction2d r - r*{sin 10degrees},r - r*{cos 10degrees}},
{Fraction2d r - r*{sin 20degrees},r - r*{cos 20degrees}},{Fraction2d r - r*{sin 30degrees},r - r*{cos 30degrees}},
{Fraction2d r - r*{sin 40degrees},r - r*{cos 40degrees}},{Fraction2d r - r*{sin 50degrees},r - r*{cos 50degrees}},
{Fraction2d r - r*{sin 60degrees},r - r*{cos 60degrees}},{Fraction2d r - r*{sin 70degrees},r - r*{cos 70degrees}},
{Fraction2d r - r*{sin 80degrees},r - r*{cos 80degrees}},{Fraction2d r - r*{sin 90degrees},r - r*{cos 90degrees}}
}
}
{let BackCanvas:Canvas = {Canvas
width = 5cm,
height = 2cm,
border-width = 1pt,
border-color = "black"
}
}
{value
{let cb:CommandButton = {CommandButton
{on Action do
{BackCanvas.add BackGraphic, x = 0cm, y = 2cm}
}
}
}
{VBox BackCanvas,cb}
}


Click to view carl's profile Curl carl 83 posts since
Oct 17, 2007
1. Re: How to make a rounded-corner graphic have a rounded-corner border? Jul 8, 2008 1:51 AM
Option borders are not rounded. You would have to either draw one yourself, or, in this case, since you are using a Canvas, you might consider using a PathShape or something in the shape of a rounded border, which you could put on top of the Canvas's stack.

Alternatively, if you were to use styled controls, you could use a SkinnableFrame and set a ShadedSkinSpec (or ImageSkinSpec, depending) with appropriate properties, effectively giving your Graphic a rounded rectangle background. This is a quick example, leaving out the shape from your example:

{SkinnableFrame
    skin = {ShadedSkinSpec
               "transparent",
               "transparent",
               corner-radius = 5px,
               border-color = "brown"
           },
    {Frame
        margin = 3px,
        {Canvas background = "aqua"}
    }
}