Ruby on Rails
JavaScript, XHTML, CSS
Java, Distributed Systems
<you_name_it>
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
}
});

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