Làm cách nào để căn chỉnh văn bản căn chỉnh trong canvas html5?

Làm thế nào tôi có thể sắp xếp văn bản trong một canvas html5 để biện minh "? Trong đoạn mã dưới đây, văn bản có thể được sang trái/phải/trung tâm liên kết. Tôi cần phải thiết lập align="justify". Xin gợi ý cách này có thể được thực hiện?Làm cách nào để căn chỉnh văn bản căn chỉnh trong canvas html5?

HTML :

<body onload="callMe()"> 
    <canvas id="MyCanvas"></canvas> 
</body>

JS:

function callMe() { 
    var canvas = document.getElementById("MyCanvas"); 
    var ctx = canvas.getContext("2d"); 
    var txt = "Welcome to the new hello world example"; 
    cxt.font = "10pt Arial"; 
    cxt.textAlign = "left"; 

    /* code to text wrap*/ 
    cxt.fillText(txt, 10, 20); 
}

Nguồn

2011-06-29 Sangam254

Câu hỏi thú vị :). Nó sẽ giúp một chút dù bạn muốn định dạng câu hỏi của bạn nhiều hơn một chút, đặc biệt là bit mã;) – Jeroen

canvas HTML5 không hỗ trợ bản vẽ text multiline do đó không có hiệu ứng thực sự đối với loại căn chỉnh.

Nếu bạn muốn hỗ trợ dòng thức ăn, bạn phải hỗ trợ nó cho mình, bạn có thể thấy một cuộc thảo luận trước đó về nó ở đây: HTML5 Canvas - can I somehow use linefeeds in fillText()?

Đây là triển khai thực hiện của tôi cho word-wrap/feeds dòng:

function printAtWordWrap(context, text, x, y, lineHeight, fitWidth) { 
     fitWidth = fitWidth || 0; 
     lineHeight = lineHeight || 20; 

     var currentLine = 0; 

     var lines = text.split(/\r\n|\r|\n/); 
     for (var line = 0; line < lines.length; line++) { 


      if (fitWidth <= 0) { 
       context.fillText(lines[line], x, y + (lineHeight * currentLine)); 
      } else { 
       var words = lines[line].split(' '); 
       var idx = 1; 
       while (words.length > 0 && idx <= words.length) { 
        var str = words.slice(0, idx).join(' '); 
        var w = context.measureText(str).width; 
        if (w > fitWidth) { 
         if (idx == 1) { 
          idx = 2; 
         } 
         context.fillText(words.slice(0, idx - 1).join(' '), x, y + (lineHeight * currentLine)); 
         currentLine++; 
         words = words.splice(idx - 1); 
         idx = 1; 
        } 
        else 
        { idx++; } 
       } 
       if (idx > 0) 
        context.fillText(words.join(' '), x, y + (lineHeight * currentLine)); 
      } 
      currentLine++; 
     } 
    }

không có hỗ trợ cho căn chỉnh hoặc biện minh ở đó, bạn sẽ phải thêm nó vào

Nguồn

2011-06-29 09:00:44 Variant

tôi có thể phá vỡ một câu dựa trên dòng mới và đặt phần còn lại của văn bản trong dòng tiếp theo (tức là nhiều dòng). đến giữa/phải/trái bằng textAlign. Nhưng tôi không thể căn chỉnh nó để biện minh cho .. – Sangam254

cảm ơn bạn vì mã .. Nhưng tôi cần trợ giúp để biện minh cho văn bản – Sangam254

Yuo cna sử dụng thuật toán biện minh này: https: //www.rose- hulman.edu/class/csse/csse221/200910/Projects/Markov/justification.html nên khá dễ thực hiện trong canvas – Variant

Làm cách nào để căn chỉnh văn bản căn chỉnh trong canvas html5?

Trả lời

Các vấn đề liên quan