Định vị văn bản Raphael js: định tâm văn bản trong một vòng tròn

Question

Tôi đang sử dụng Raphael js để vẽ số được khoanh tròn. Vấn đề là mỗi số có chiều rộng/chiều cao khác nhau để sử dụng một tập hợp các tọa độ để căn giữa văn bản không hoạt động. Văn bản hiển thị khác nhau giữa IE, FF và safari. Có cách nào năng động để tìm chiều cao/chiều rộng của số và căn giữa nó cho phù hợp không?

Đây là trang thử nghiệm của tôi:

http://jesserosenfield.com/fluid/test.html

và mã của tôi:

function drawcircle(div, text) { 
    var paper = Raphael(div, 26, 26); //<< 
    var circle = paper.circle(13, 13, 10.5); 
    circle.attr("stroke", "#f1f1f1"); 
    circle.attr("stroke-width", 2); 
    var text = paper.text(12, 13, text); //<< 
    text.attr({'font-size': 15, 'font-family': 'FranklinGothicFSCondensed-1, FranklinGothicFSCondensed-2'}); 
    text.attr("fill", "#f1f1f1"); 
} 

window.onload = function() { 
    drawcircle("c1", "1"); 
    drawcircle("c2", "2"); 
    drawcircle("c3", "3"); 
}; 

Cảm ơn rất nhiều!

Answer 1

Có lẽ đây:

var paper = Raphael(div, 26, 26); //<< 
var circle = paper.circle(13, 13, 10.5); 
circle.attr("stroke", "#f1f1f1"); 
circle.attr("stroke-width", 2); 
var text = paper.text(0, 0, text); //<< 
text.attr({'font-size': 15, 'font-family': 'FranklinGothicFSCondensed-1, FranklinGothicFSCondensed-2'}); 
text.attr("fill", "#f1f1f1"); 
text.translate((35 - text.getBBox().width)/2, (45 - text.getBBox().height)/2); 

Answer 2

Các Rotating Text Exactly dụ (được liệt kê trong cột bên tay phải của trang, hoặc here in github), thảo luận về việc đưa văn bản ở một vị trí chính xác, cùng với, như thường lệ, các bước yêu cầu thêm để làm cho mọi thứ hoạt động trong IE.

Nó tìm thấy một hộp giới hạn cho văn bản; Tôi tưởng tượng nó là đơn giản để di chuyển văn bản bằng một nửa hộp giới hạn như Jan đề nghị.

Answer 3

(Trả lời được viết lại): Raphael.js tập trung các nút văn bản theo chiều ngang và theo chiều dọc theo mặc định.

"Căn giữa" ở đây có nghĩa là đối số x, y của phương thức paper.text() mong đợi trung tâm của hộp giới hạn của văn bản.

Vì vậy, chỉ cần xác định tương tự x, y có giá trị như hình tròn nên tạo ra kết quả mong muốn:

var circle = paper.circle(13, 13, 10.5); 
var text = paper.text(13, 13, "10"); 

(jsFiddle)

mã nguồn liên quan:

• source line responsible for vertical alignment
• source line responsible for horizontal alignment

Answer 4

Sử dụng thuộc tính này: 'text-anchor':'start':

paper.text(x, y, text).attr({'text-anchor':'start'});