I am having some trouble accurately drawing polygons using Morphic and the
various Canvas types.
My task is to recreate the Mac OS Platinum style buttons, and do be as
pixel-accurate as I can. For the basic button, this involves creating a
rectangle whose corners are always fattened by 2px on each side, no matter
the extent of the underlying morph:
I can achieve this kind of outline when drawing individual lines one at a
time with a Canvas:
```smalltalk
canvas := FormCanvas extent: 150@30.
rect := Rectangle point: (0@0) point: (150@30).
vertices := {
(rect left)@(rect top + 2).
(rect left + 2)@(rect top).
(rect right - 3)@(rect top).
(rect right - 1)@(rect top + 2).
(rect right -1)@(rect bottom - 3).
(rect right - 3)@(rect bottom -1).
(rect left + 2)@(rect bottom - 1).
(rect left)@(rect bottom - 3).
"(rect left)@(rect top + 2)" }.
canvas
line: (vertices at: 1) to: (vertices at: 2) color: Color black;
line: (vertices at: 2) to: (vertices at: 3) color: Color black;
line: (vertices at: 3) to: (vertices at: 4) color: Color black;
line: (vertices at: 4) to: (vertices at: 5) color: Color black;
line: (vertices at: 5) to: (vertices at: 6) color: Color black;
line: (vertices at: 6) to: (vertices at: 7) color: Color black;
line: (vertices at: 7) to: (vertices at: 8) color: Color black;
line: (vertices at: 8) to: (vertices at: 1) color: Color black.
canvas form asMorph openInWindow.
```
Which gives me:
But using the native Polygon drawing features of Canvas yield a different,
and incorrect, result:
```smalltalk
canvas := FormCanvas extent: 150@30.
rect := Rectangle point: (0@0) point: (150@30).
vertices := {
(rect left)@(rect top + 2).
(rect left + 2)@(rect top).
(rect right - 3)@(rect top).
(rect right - 1)@(rect top + 2).
(rect right -1)@(rect bottom - 3).
(rect right - 3)@(rect bottom -1).
(rect left + 2)@(rect bottom - 1).
(rect left)@(rect bottom - 3).
"(rect left)@(rect top + 2)" }.
canvas drawPolygon: vertices fillStyle: Color transparent borderWidth:
1 borderColor: Color black.
canvas form asMorph openInHand.
```
Either this is some kind of limitation in BalloonCanvas/BalloonEngine
(which "becomes" the canvas for polygon draw operations) or I am doing
something terribly wrong.
Ideally I can trace this shape as a border, since I'll need to trace yet
more additional borders around it (like the "default" button in Platinum,
which has a fat complex border).
Borders are already kind of complicated, so any help you all can provide
would be much appreciated.
FYI this same behavior is present in Squeak.
--
Eric
