bọc văn bản để phù hợp với một hình chữ nhật: raphael

Question

Bất cứ ai biết về chức năng đó có thể phá vỡ văn bản tại ranh giới từ để phù hợp với hình chữ nhật

Sau đây là mã cho hình chữ nhật và văn bản

window.onload = function() { 

    var outsideRectX1=30, outsideRectY1=30,outsideRectX2=220, outsideRectY2=480, outsideRectR=10; 
    var group = paper.set(); 


    var rect1=paper.rect(outsideRectX1+40, outsideRectY1+70, 80, 40,10); 
    var text3=paper.text(outsideRectX1+75, outsideRectY1+85,"Test code for wrap text").attr({fill: '#000000', 'font-family':'calibri', 'font-size':'14px'}); 

    group.push(rect1); 
group.push(text3); 

    }; 

Khi văn bản lớn hơn chiều rộng hình chữ nhật nó tự động bọc để nó luôn luôn hiển thị vào ranh giới hình chữ nhật.

Answer 1

Tôi không chắc chắn có cách trực tiếp nào để gói văn bản theo kích thước của hình chữ nhật hay không. Có thể bạn có thể chỉ định ngắt dòng hoặc "\ n". Hoặc bạn có thể thử thay đổi kích thước hình chữ nhật và khi độ dài văn bản tăng lên.

Đây là mã mẫu nơi hình chữ nhật thay đổi kích thước khi độ dài văn bản tăng lên.

var recttext = paper.set(); 
el = paper.rect(0, 0, 300, 200); 
text = paper.text(0,10, "Hi... This is a test to check whether the rectangle dynamically changes its size.").attr({"text-anchor":"start",fill:'#ff0000',"font-size": 14}); 
text1=paper.text(0,30,"hi").attr({"text-anchor":"start",fill: '#ff0000',"font-size": 14}); 
//el.setSize(495,200); 
recttext.push(el); 
recttext.push(text); 
recttext.push(text1); 
alert(recttext.getBBox().width); 
alert(recttext.getBBox().height); 
var att = {width:recttext.getBBox().width,height:recttext.getBBox().height}; 
el.attr(att); 
recttext.translate(700,400); 

Answer 2

Tôi biết bây giờ nó hơi muộn, nhưng bạn có thể quan tâm đến dự án [Raphael-paragraph] [1] của tôi.

Đây là thư viện nhỏ cho phép bạn tạo văn bản nhiều dòng được tự động bao gồm các giới hạn chiều rộng và chiều cao tối đa, chiều cao dòng và cấu hình kiểu văn bản. Nó vẫn khá beta-ish và đòi hỏi rất nhiều tối ưu hóa, nhưng nó sẽ làm việc cho các mục đích của bạn.

Ví dụ sử dụng và tài liệu được cung cấp trên trang GitHub.