HTML5文本畫布旋轉的情況下文本寬度大於允許的最大寬度

Question

朋友，我發現旋轉文本畫布對象有點棘手。事情是，我正在繪製圖形，但有時每個小節的寬度都小於該小節的「值」。所以我必須調整'價值'90度。它將在大多數情況下工作。

我做了以下

a function(x, y, text, maxWidth...) 
var context = this.element.getContext('2d'); 

var metric = context.measureText(text); //metric will receive the measures of the text 

if(maxWidth != null){ 
    if(metric.width > maxWidth) context.rotate(Math.PI/2); 
} 
context.fillText(text, x, y); 

好了，但它並沒有真正發揮作用。我看到的問題：文字以不同的角度重複。角度不是我想要的（也許只是三角學問題）。

嗯，我只是不知道該怎麼做。我讀了一些關於「保存」和「恢復」的方法，但我不知道如何處理它們。我做了一些嘗試，但沒有人工作。

你能幫我解決嗎，夥計們？

Answer 1

這是一個有點棘手，因爲有很多的概念，能上簡單地回答，讓我做你的什麼，我想你想在這裏做一個例子：

http://jsfiddle.net/5UKE3/

它的主要部分是這個。我已經投入了大量的評論怎麼回事解釋：

function drawSomeText(x, y, text, maxWidth) { 
    //metric will receive the measures of the text 
    var metric = ctx.measureText(text); 
    console.log(metric.width); 

    ctx.save(); // this will "save" the normal canvas to return to 
    if(maxWidth != null && metric.width > maxWidth) { 
     // These two methods will change EVERYTHING 
     // drawn on the canvas from this point forward 
     // Since we only want them to apply to this one fillText, 
     // we use save and restore before and after 

     // We want to find the center of the text (or whatever point you want) and rotate about it 
     var tx = x + (metric.width/2); 
     var ty = y + 5; 

     // Translate to near the center to rotate about the center 
     ctx.translate(tx,ty); 
     // Then rotate... 
     ctx.rotate(Math.PI/2); 
     // Then translate back to draw in the right place! 
     ctx.translate(-tx,-ty); 
    } 
    ctx.fillText(text, x, y); 
    ctx.restore(); // This will un-translate and un-rotate the canvas 
} 

要繞你必須轉化爲現貨正確的位置，然後旋轉，再翻譯回。

一旦當你不希望他們，你必須使用save和restore「記住」正常旋轉範圍內旋轉永遠，所以爲了停止轉動你的所有新的繪圖操作的畫布上，未上市的情況。

如果什麼都沒有任何意義，讓我知道。花時間製作畫布應用程序！