If I was just going to fill the path then creating a round rect path, a triangle path, and then joining them using 'add tPath2 to tPath' would do the trick. The problem is that if you stroke this path then the entire round rect is stroked. I want the stroke to follow the the outer edge, including the triangle.
I've tried creating the shape by hand using 'line to' and 'put arc path centered at ...'. I am able to create the shape and it looks right when I stroke it. If I try to fill it, however, then you can tell that the path I created isn't one complete path.
While I could combine the two techniques and end up with what I need, I would be interested in knowing how to create one path that can be stroked and filled. I've attached screenshots of what I've come up with so far. The first two examples are from the code below. The left is being stroked and filled. The middle is being stroked. The right one is from an attempt to join rounded rect and triangle paths. Any idea as to how I can make this one path that can be filled and stroked?
Code: Select all
widget com.livecode.extensions.screensteps.themedMenu
use com.livecode.canvas
use com.livecode.widget
use com.livecode.engine
metadata title is "???"
metadata author is "???"
metadata version is "1.0.0"
private variable mMenuWidth as Number
private variable mMenu as List
private variable mMenuItemHeight as Number
private variable mBackgroundColor as Color
private variable mTopBottomMargin as Number
private variable mChevronBounds as Rectangle
private variable mAnchorSide as String
private variable mChevronXOffset as Number
private variable mCornerRadius as Number
private variable mPath as Path
public handler OnCreate()
put 177 into mMenuWidth
put ["My Article", "My Other Article", "My Other Other Article", "-", "New Article"] into mMenu
put 31 into mMenuItemHeight
put 10 into mTopBottomMargin
put rectangle [0,0,15,9] into mChevronBounds
put color [42/255, 42/255, 42/255] into mBackgroundColor
put "right" into mAnchorSide
put 10 into mChevronXOffset
put 8 into mCornerRadius
put path "" into mPath
end handler
public handler OnOpen()
calculatePositions()
end handler
public handler OnPaint()
set the paint of this canvas to solid paint \
with color [the red of mBackgroundColor, the green of mBackgroundColor, the blue of mBackgroundColor, 0.9]
fill mPath on this canvas
set the paint of this canvas to solid paint with mBackgroundColor
stroke mPath on this canvas
end handler
public handler OnClick()
if currently popped up then
close popup -- returning SOMETHING
end if
end handler
private handler calculatePositions()
variable tElement
variable tHeight as Number
put the height of mChevronBounds into tHeight
add mTopBottomMargin * 2 to tHeight
repeat for each element tElement in mMenu
if tElement is "-" then
add 1 to tHeight
else
add mMenuItemHeight to tHeight
end if
end repeat
variable tPath as Path
variable tPoint as Point
put path "" into tPath
put path "" into mPath
if mAnchorSide is "right" then
-- Top-left
put point [mCornerRadius/2, the height of mChevronBounds+mCornerRadius/2] into tPoint
put arc path centered at tPoint with radius mCornerRadius from 180 to 270 into tPath
add tPath to mPath
-- Top
set the x of tPoint to mMenuWidth-mChevronXOffset-the width of mChevronBounds
set the y of tPoint to the height of mChevronBounds
line to tPoint on mPath
-- Chevron
add the width of mChevronBounds/2 to the x of tPoint
put 0 into the y of tPoint
line to tPoint on mPath
add the width of mChevronBounds/2 to the x of tPoint
put the height of mChevronBounds into the y of tPoint
line to tPoint on mPath
-- Chevron offset
variable tDistance as Number
if mChevronXOffset > mCornerRadius then
-- the arc will cover just the radius
set the x of tPoint to mMenuWidth - mCornerRadius/2
line to tPoint on mPath
end if
-- Top-right corner
set the x of tPoint to mMenuWidth - mCornerRadius/2
set the y of tPoint to the height of mChevronBounds + mCornerRadius/2
put arc path centered at tPoint with radius mCornerRadius from 270 to 360 into tPath
add tPath to mPath
-- Right side
put point [mMenuWidth, tHeight - mCornerRadius/2] into tPoint
line to tPoint on mPath
-- Bottom-right corner
set the x of tPoint to mMenuWidth - mCornerRadius/2
put arc path centered at tPoint with radius mCornerRadius from 0 to 90 into tPath
add tPath to mPath
-- Bottom
put point [mCornerRadius/2, tHeight] into tPoint
line to tPoint on mPath
-- Bottom-left
put point [mCornerRadius/2, tHeight- mCornerRadius/2] into tPoint
put arc path centered at tPoint with radius mCornerRadius from 90 to 180 into tPath
add tPath to mPath
-- Left
set the x of tPoint to 0
move to tPoint on mPath
set the y of tPoint to the height of mChevronBounds+mCornerRadius/2
line to tPoint on mPath
else
end if
end handler
end widget