Raphael-JS: Xoay với một góc tròn

Question

paper.rect(0, 0, settings.width, settings.height, settings.radius); 

Tạo hình chữ nhật đẹp với các góc bo tròn. Có thể tạo hình chữ nhật chỉ với một góc tròn không?

Answer 1

Góc tròn làm nổi bật bản đồ trực tiếp trên các thuộc tính SVG rx và ry cơ bản, chúng áp dụng cho toàn bộ hình chữ nhật và do đó không có khả năng chỉ đặt nó trên một góc.

This blog post thảo luận về cách tiếp cận trong SVG về cơ bản bao trùm các góc bạn không muốn làm tròn. Mặc dù các ví dụ của anh dường như ngoại tuyến, nhưng cách tiếp cận này khá dễ dàng để đảo ngược kỹ sư thành SVG.

Phương pháp thay thế sẽ là sử dụng a path thay vì đối tượng hình chữ nhật và tự vẽ toàn bộ đường viền. Cú pháp hơi mơ hồ một chút nhưng rất dễ dàng một khi bạn hiểu những gì đang xảy ra. Hãy thử Jakob Jenkov's SVG Path tutorial để được giới thiệu.

Answer 2

Nếu bạn sử dụng Raphael JS:

Raphael.fn.roundedRectangle = function (x, y, w, h, r1, r2, r3, r4){ 
    var array = []; 
    array = array.concat(["M",x,r1+y, "Q",x,y, x+r1,y]); //A 
    array = array.concat(["L",x+w-r2,y, "Q",x+w,y, x+w,y+r2]); //B 
    array = array.concat(["L",x+w,y+h-r3, "Q",x+w,y+h, x+w-r3,y+h]); //C 
    array = array.concat(["L",x+r4,y+h, "Q",x,y+h, x,y+h-r4, "Z"]); //D 

    return this.path(array); 
}; 

Để có một hình chữ nhật với chỉ góc trên bên phải tròn

var paper = Raphael("canvas", 840, 480); 
paper.roundedRectangle(10, 10, 80, 80, 0, 20, 0, 0); 

Nguồn và ví dụ trực tuyến: http://www.remy-mellet.com/blog/179-draw-rectangle-with-123-or-4-rounded-corner/

Answer 3

Câu hỏi rất cũ, đây là một con đường tốt hơn. Tôi đã chuyển đổi nó thành các tọa độ tương đối, sẽ tốt hơn ở các hoạt ảnh ...

Raphael.fn.roundedRectangle = function (x, y, w, h, r1, r2, r3, r4){ 
    var array = []; 
    array = array.concat(["M",x+r1,y]); 
    array = array.concat(['l',w-r1-r2,0]);//T 
    array = array.concat(["q",r2,0, r2,r2]); //TR 
    array = array.concat(['l',0,h-r3-r2]);//R 
    array = array.concat(["q",0,r3, -r3,r3]); //BR 
    array = array.concat(['l',-w+r4+r3,0]);//B 
    array = array.concat(["q",-r4,0, -r4,-r4]); //BL 
    array = array.concat(['l',0,-h+r4+r1]);//L 
    array = array.concat(["q",0,-r1, r1,-r1]); //TL 
    array = array.concat(["z"]); //end 

    return this.path(array); 
};