HTML5 Text Canvas 在文本宽度大于允许的最大宽度时旋转

Posted

技术标签:

【中文标题】HTML5 Text Canvas 在文本宽度大于允许的最大宽度时旋转【英文标题】:HTML5 Text Canvas rotate in case text width is larger than maximum width allowed 【发布时间】:2011-12-06 23:46:03 【问题描述】:

朋友们,我发现旋转文本画布对象有点棘手。问题是,我正在绘制图形,但有时每个条的宽度小于该条的“值”。所以我必须将“价值”评价为 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);

好的,但它并没有真正起作用。我看到的问题: 文本以不同的角度重复。角度不是我想要的(也许只是三角问题)。

我只是不知道该怎么办。我读过一些关于“保存”和“恢复”等方法的内容,但我不知道如何处理它们。我做了一些尝试,但没有一个成功。

你们能帮我解决这个问题吗,伙计们?

【问题讨论】:

【参考方案1】:

这有点难以回答,因为有很多概念正在发生,所以我给你做了一个我认为你想在这里做的例子:

http://jsfiddle.net/5UKE3/

它的主要部分是这个。我已经放了很多 cmets 来解释发生了什么:

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和@987654324 @ 以“记住”正常的、未旋转的上下文。

如果还有什么不明白的,请告诉我。祝您制作画布应用愉快!

【讨论】:

在 css3 和 js 中看到这个很有趣。

以上是关于HTML5 Text Canvas 在文本宽度大于允许的最大宽度时旋转的主要内容,如果未能解决你的问题,请参考以下文章

如何在 HTML5 Canvas 中获取绘制弧的宽度和高度?

如何在 HTML5 画布元素上编写文本?

HTML5 画布中的中心(比例字体)文本

canvas文本自动换行

canvas(四) 绘制文字

HTML5 Canvas 上的矩形被拉伸