Movable Type 備忘録

jQuery でアンチエイリアスの角丸をやってみる（jQuery curvyCorners）

Dec032007
Author: bzbell
Categories: Tools
Tags: JavaScript, jQuery

Next Page: ロールアップするナビゲーションバー（tween.js）
Prev Page: イラストレーターを勉強しよう

こんばんわ^^

ここ最近ずっと日曜日の夜はプログラムの解析してる bzbell です。
もっと早くから始めればいいじゃんっ!! と思うかもですが、それなりにわたしも忙しいわけでして (;￣∇￣A

ですので、今回もサクっと説明します (;￣∇￣A はは

以前、youmos さんとこで、prototype によるアンチエイリアスでの角丸を実現する curvyCorners が紹介されてました。
アンチエイリアスの角丸をJavaScriptで生成（curvyCorners）

今回は curvyCorners の jQuery 版、jQuery curvyCorners を試してみましたのでご紹介です。

まずはサンプルですね。
jQuery curvyCorners サンプル

jQuery curvyCorners の使い方

使い方はカンタンで角丸にしたい要素および、各コーナー回転半径を指定するだけです。
具体的には以下のようになります。

$('#sidebox-l').corner({
tl: { radius: 16 }, /* 左上コーナー回転半径     */
tr: false,          /* 右上コーナー回転半径     */
bl: { radius: 16 }, /* 左下コーナー回転半径     */
br: false,          /* 右下コーナー回転半径     */
antiAlias: true,    /* アンチエイリアス処理有無 */
/* false(なし)/true(あり)   */
autoPad: true,      /* パディング処理有無       */
/* false(なし)/true(あり)   */
validTags: ["div"] /* 対象とする要素            */
});

上記はサンプルの一部を抜粋したものです。
青い字の部分で角丸にしたい ID を指定します。

赤い時の部分の各パラメータは以下の通りです。

tl、tr、bl、br
各コーナーの角丸を設定します。左から順に左上、右上、左下、右下です。
- { radius: 16 }：半径 16px の角丸にする場合
- false：角丸にしない
antiAlias
アンチエイリアスの有無を設定します。
- true：アンチエイリアスあり
- false：アンチエイリアスなし
autoPad
パディング処理の有無を設定します。
- true：パディングあり
- false：パディングなし
validTags
角丸の対象とするタグ名称を指定します。たとえば、サンプルでは以下のようになっています。
```
<div id="sidebox-l">side left</div>
```
青い字の要素を指定してあげます。