roundedRect with specific rounded corners

I thought I might share this as I needed it for my project. It can likely become more elegant, but here is my code for creating a rounded rectangle where only specific corners get the radius (by default they all do).

$.registerLiquidCanvasPlugin({
name: "partialRoundedRect",
defaultOpts: { radius:10, tl:"yes", tr:"yes", bl:"yes", br:"yes" },
paint: function(area) {
var ctx = area.ctx;
var opts = this.opts;
ctx.beginPath();
ctx.moveTo(0, opts.radius);
if (opts.bl == "yes") {
ctx.lineTo(0, area.height - opts.radius);
ctx.quadraticCurveTo(0, area.height, opts.radius, area.height);
}
else {
ctx.lineTo(0, area.height);
}
if (opts.br == "yes") {
ctx.lineTo(area.width - opts.radius, area.height);
ctx.quadraticCurveTo(area.width, area.height, area.width, area.height - opts.radius);
}
else {
ctx.lineTo(area.width, area.height);
}
if (opts.tr == "yes") {
ctx.lineTo(area.width, opts.radius);
ctx.quadraticCurveTo(area.width, 0, area.width - opts.radius, 0);
}
else {
ctx.lineTo(area.width, 0);
}
if (opts.tl == "yes") {
ctx.lineTo(opts.radius, 0);
ctx.quadraticCurveTo(0, 0, 0, opts.radius);
}
else {
ctx.lineTo(0, 0);
ctx.lineTo(0, opts.radius);
}
ctx.closePath();
if (this.action) this.action.paint(area); // for chaining
}
});

Trackback URL for this post:

http://www.ruzee.com/trackback/283

great but....

how can i use it ? I tried to put it into $(document).ready() but still cant call => partialRoundedRect:

$("#cont2RightCal").liquidCanvas("[border {color:#d2e6f6;width:1;} fill{color:#fff;}] => partialRoundedRect{radius:10, tl:"yes", tr:"yes", bl:"no", br:"no" }");

You need semi-colons...

Hi,

Try replacing the commas between the corner attributes with semi-colons.

Tim

Thanks!

Thanks!

I did this by changing numerical values in the original roundedRect code, but this is simpler than my method.

Tim