How Do I Create Rectangles With Only Top or Bottom Rounded?

Submitted by Zampa on Wed, 04/01/2009 - 01:25

I'd like to replicate the functionality of rounding selective corners (top corners only, just one corner, etc.) that you have in RuzeeBorders and ShadedBorder. Would I use roundedRect, or do you have some special syntax that would work with Liquid Canvas?

Could you perhaps create an example? I would greatly appreciate it!

-Nathan

Trackback URL for this post:

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

Add new comment

Liquid Canvas

How Do I Create Rectangles With Only Top or Bottom Rounded?

Submitted by ankoerner on Fri, 06/26/2009 - 19:25.

Insert the Plugin in liquid-canvas-plugins.js
--------------------------------------------------------

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

Usage:

ecken{tl:0; bl:20; br:30; tr:40}

tl: --> top left corner
bl: --> button left corner
br: --> butten right corner
tr: --> top right coner

It's really rather easy if

Submitted by tomak (not verified) on Tue, 06/16/2009 - 03:45.

It's really rather easy if you take a pencil and just draw it up as you go and reading through https://developer.mozilla.org/en/Canvas_tutorial/Drawing_shapes. But here is my version, with an open bottom for use in tabs, but you can always close this with a line.
$.registerLiquidCanvasPlugin({
name: "top_roundedRect",
defaultOpts: { radius:20 },
paint: function(area) {
var ctx = area.ctx;
var opts = this.opts;
ctx.beginPath();
ctx.moveTo(0, opts.radius);

ctx.quadraticCurveTo(0,0,opts.radius,0);
ctx.lineTo(area.width-opts.radius,0);
ctx.quadraticCurveTo(area.width, 0, area.width, opts.radius);
ctx.lineTo(area.width, area.height);
ctx.moveTo(0, area.height); //if you want to have a line across the bottom, change this to ctx.lineTo(0, area.height);
ctx.lineTo(0,opts.radius);

ctx.closePath();
if (this.action) this.action.paint(area); // for chaining
},
shrink: function(area, steps) {
this.defaultShrink(area, steps);
this.opts.radius -= steps;
}
});

Steffen, do you agree with

Submitted by Shogo (not verified) on Fri, 05/22/2009 - 03:59.

Steffen, do you agree with the above comment? Or could it be a new feature you can add in the next version? This way we can make Tabs with Liquid Canvas with the new language you created.

Like This

Submitted by Dictionary (not verified) on Sat, 04/04/2009 - 05:44.

You need to make a new "plugin" and add it to "liquid-canvas-plugins.js"

Then instead of callins something like

[shadow border{color:#fff} fill{color:#f80}] => roundedRect

call

[shadow border{color:#fff} fill{color:#f80}] => bottom_roundedRect

where bottom_roundRect is declared in your "liquid-canvas-plugins.js" file:

$.registerLiquidCanvasPlugin({
name: "bottom_roundedRect",
defaultOpts: { radius:20 },
paint: function(area) {
var ctx = area.ctx;
var opts = this.opts;
ctx.beginPath();
ctx.moveTo(0, opts.radius);

ctx.lineTo(0, area.height - opts.radius);
ctx.quadraticCurveTo(0, area.height, opts.radius, area.height);

ctx.lineTo(area.width - opts.radius, area.height);
ctx.quadraticCurveTo(area.width, area.height, area.width, area.height - opts.radius);

ctx.lineTo(area.width, opts.radius);
ctx.quadraticCurveTo(area.width, 0, area.width - opts.radius, 0);

ctx.lineTo(0, 0);
//ctx.quadraticCurveTo(0, 0, 0, opts.radius);

ctx.closePath();
if (this.action) this.action.paint(area); // for chaining
},
shrink: function(area, steps) {
this.defaultShrink(area, steps);
this.opts.radius -= steps;
}
});

More plugin examples?

Submitted by vhollo on Sun, 06/14/2009 - 01:46.

..for those of us not knowing the canvas-synthax but javascript, could you give some more hints like top_roundedRect and more?
Thanks in advance!

It's really rather easy if

Submitted by tomak (not verified) on Tue, 06/16/2009 - 03:43.

ctx.closePath();
if (this.action) this.action.paint(area); // for chaining
},
shrink: function(area, steps) {
this.defaultShrink(area, steps);
this.opts.radius -= steps;
}
});

Like This

Submitted by Dictionary (not verified) on Sat, 04/04/2009 - 05:43.