Góc tròn lỏng với jQuery

Question

Cách tốt nhất để tạo góc tròn/chiều cao chất lỏng được làm tròn với jQuery là gì?

---

Plugin đó không giữ nguyên chiều cao. Tôi có một div cao 10px mà tôi muốn làm tròn các góc trên, khi tôi sử dụng tập lệnh đó, nó thêm khoảng 10px vào những gì ở đó.

Answer 1

tôi sử dụng: Jquery-roundcorners-canvas

nó xử lý biên giới, và giữ mọi thứ cùng kích thước, trên thực tế bạn phải pad trong một chút để tránh có chữ sống trong nhăn. Của nó khá nhanh, trừ khi bạn đang ở trên tức là 6. Cùng cú pháp khá của các gói góc khác, nhưng chỉ đẹp hơn nói chung.

Edited để thêm liên kết mới cho jQuery Roundcorners Canvas

Answer 2

$(this).corner(); 

Xem: malsup.com/jquery/corner và github repository for future ref

Answer 3

Cách API jQuery UI Theming hoàn thành điều này trong Firefox là với "Corner Radius Helpers".

Dưới đây là những gì họ trông giống như trong CSS đã được đóng gói trong bản sao của tôi về giao diện người dùng:

/* 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; } 

Thật không may, những dường như không có bất kỳ tác trong IE7 như của bài viết này.

Trong mã jQuery, một trong những lớp này có thể được áp dụng trong một cái gì đó thời trang như thế này:

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

Answer 4

Nếu bạn muốn kiểm soát đầy đủ về biên giới một d gradient, bạn có thể sử dụng iQuery nền Canvas Plugin của tôi. Nó hoạt động với phần tử Canvas HTML5 và cho phép vẽ đường viền và hình nền trong bất kỳ biến thể nào. Nhưng bạn sẽ có thể lập trình JavaScript

Đây là mẫu đầy đủ tính năng với phông nền và các góc được làm tròn. như bạn có thể thấy, bản vẽ hoàn toàn được thực hiện bằng JavaScript, bạn có thể đặt mọi tham số bạn muốn. Bản vẽ được làm lại trên mọi thay đổi kích thước (Do sự kiện thay đổi kích cỡ), bạn có thể điều chỉnh bản vẽ nền để hiển thị wat bạn muốn trên kích thước cụ thể này.

$(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); 
} 

Đây là plugin, và trang web này làm cho việc sử dụng rộng lớn của nó: jQuery Background Canvas Plugin