jQuery を使用した滑らかな丸みのある角

StackOverflow https://stackoverflow.com/questions/35486

  •  09-06-2019
  •  | 
  •  

質問

jQueryで滑らかな幅/高さの丸い角を作成する最良の方法は何ですか?

そのプラグインは高さを同じに保ちません。角を丸くしたい高さ10ピクセルのdivがあり、そのスクリプトを使用すると、そこにあるものに約10ピクセルが追加されます。

役に立ちましたか？

解決

私が使う： JQuery-roundcorners-canvas

境界線を処理し、同じサイズに保ちます。実際、折り目の中に文字が残らないようにするには、少しパディングする必要があります。IE 6 を使用していない限り、かなり高速です。他のコーナーパックと同じきれいな構文ですが、全体的にさらにきれいになっています。

新しいリンクを追加するために編集されました jQuery 角丸キャンバス

他のヒント

jQuery UI Theming API が Firefox でこれを実現する方法は、「コーナー半径ヘルパー".

私の UI のコピーにバンドルされている CSS では次のようになります。

/* Corner radius */
.ui-corner-tl { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; }
.ui-corner-tr { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; }
.ui-corner-bl { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; }
.ui-corner-br { -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; }
.ui-corner-top { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; }
.ui-corner-bottom { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; }
.ui-corner-right {  -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; }
.ui-corner-left { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; }
.ui-corner-all { -moz-border-radius: 4px; -webkit-border-radius: 4px; }

残念ながら、この投稿の時点では、これらは IE7 では何の効果もないようです。

jQuery コードでは、これらのクラスの 1 つが次のような方法で適用されます。

$('#SomeElementID').addClass("ui-corner-all");

境界線とグラデーションを完全に制御したい場合は、iQuery Background Canvas プラグインを使用できます。これは HTML5 Canvas 要素で動作し、任意のバリエーションで境界線や背景を描画できます。ただし、JavaScript をプログラミングできる必要があります

これは、背景のグラデーションと丸い角を備えたフル機能のサンプルです。ご覧のとおり、描画は完全に JavaScript で行われ、必要なすべてのパラメーターを設定できます。描画はサイズ変更ごとに再実行されるため (サイズ変更イベントにより)、この特定のサイズで必要な値を表示するように背景描画を調整できます。 

$(document).ready(function(){
    $(".Test").backgroundCanvas();
});

function DrawBackground() {
    $(".Test").backgroundCanvasPaint(TestBackgroundPaintFkt);
}
// Draw the background on load and resize
$(window).load(function () { DrawBackground(); });
$(window).resize(function() { DrawBackground(); });

function TestBackgroundPaintFkt(context, width, height, elementInfo){
    var options = {x:0, height: height, width: width, radius:14, border: 0 };
    // Draw the red border rectangle
    context.fillStyle = "#FF0000";
    $.canvasPaint.roundedRect(context,options);
    // Draw the gradient filled inner rectangle
    var backgroundGradient = context.createLinearGradient(0, 0, 0, height - 10);
    backgroundGradient.addColorStop(0 ,'#AAAAFF');
    backgroundGradient.addColorStop(1, '#AAFFAA');
    options.border = 5;
    context.fillStyle = backgroundGradient;
    $.canvasPaint.roundedRect(context,options);
}

これがプラグインです。このサイトではそれを多用しています。jQuery バックグラウンド キャンバス プラグイン

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top