Ruby on Rails
JavaScript, XHTML, CSS
Java, Distributed Systems
<you_name_it>
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
How Do I Create Rectangles With Only Top or Bottom Rounded?
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
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
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
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?
..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
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;
}
});
Like This
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;
}
});