Creating a rectangle with a different radius on each corner

[trevordevore]

I'm trying to create a rectangle that has two rounded corners and two 90 corners. I found `put rounded rectangle path of tRect with radius 10 into tPath` but that only targets every corner. I was hoping to be able to pass a list to radius that would target each individual corner. For example:

Code: Select all

put rounded rectangle path of tRect with radius [0,10,10,0] into tPath

I would just fill in the edges with another rectangle but I am using a transparent color so I can't have two rects on top of each other.

Is the only way to accomplish this to create the path by hand?

[trevordevore]

Looks like the limitation is part of Skia. One approach I thought of was to draw a rounded rect with the clipping region of the canvas set. I would use the clipping region to only draw the rounded corners I wanted. I would then go back and fill in the normal rectangle areas. I kept getting an error when trying to set the clipping rectangle though. I filed a bug report.

I dug into the Skia code to see how their rounded rect code works. Here is the translation I came up with. The variable tRect is assumed. It is the rectangle that you want to fill. This code will round the top right and bottom right corners. The top left and bottom left will be 90 degree angles.

Code: Select all

variable tRadius as real
put 9 into tRadius

variable SK_ScalarSqrt2 as real
variable SK_Scalar1 as real
variable CUBIC_ARC_FACTOR as real
variable sx as real
variable sy as real

put 1.41421356 into SK_ScalarSqrt2
put 1.0 into SK_Scalar1
put ((SK_ScalarSqrt2 - SK_Scalar1) * 4 / 3) into CUBIC_ARC_FACTOR
put tRadius * CUBIC_ARC_FACTOR into sx
put tRadius * CUBIC_ARC_FACTOR into sy

put path "" into tPath
move to point [the left of tRect, the top of tRect] on tPath
line to point [the right of tRect - tRadius, the top of tRect] on tPath

curve through point [the right of tRect - tRadius + sx, the top of tRect] \
	then point [the right of tRect, the top of tRect + tRadius -sy] \
	to point [the right of tRect, the top of tRect + tRadius] on tPath

line to point [the right of tRect, the bottom of tRect - tRadius] on tPath

curve through point [the right of tRect, the bottom of tRect - tRadius + sy] \
	then point [the right of tRect - tRadius + sx, the bottom of tRect] \
	to point [the right of tRect - tRadius, the bottom of tRect] on tPath

line to point [the left of tRect, the bottom of tRect] on tPath

[LCMark]

@trevordevore: This should be simplified shortly - @runrevian has implemented both 'arc' path commands and an SVG path syntax parser to allow you to create paths. The arc to syntax in particular will allow you to create the path you need without having to use bezier approximations directly.

[trevordevore]

That will be great!