HTML5文本在文本宽度大于允许的最大宽度的情况下旋转 [英] HTML5 Text Canvas rotate in case text width is larger than maximum width allowed

问题描述

朋友，我发现旋转文本画布对象有点棘手。事情是，我正在绘制一个图形，但有时每个条的宽度小于该值的'值'。所以我必须批准'价值'90度。

我正在进行以下操作：

  a function（x，y，text，maxWidth ...）
 var context = this.element.getContext（'2d'）; 
 
 var metric = context.measureText（text）; // metric将接收文本的度量
 
 if（maxWidth！= null）{
 if（metric.width> maxWidth）context.rotate（Math.PI / 2）; 
} 
 context.fillText（text，x，y）; 
  

好的，但它不工作。我看到的问题：文本以不同的角度重复。角度不是我想要的（也许只是一个三角学的问题）。

我只是不知道该怎么办。我读了一些关于保存和恢复的方法，但我不怎么做。

我已经尝试过，但没有人工作。

>解决方案

这是一个有点棘手的回答只是因为有很多的概念，所以我给你一个例子，我认为你想在这里做： p>

http://jsfiddle.net/5UKE3/

它的主要部分是这个。我已经提出了很多评论来解释发生了什么：

  function drawSomeText（x，y，text，maxWidth） {
 // metric将接收文本的度量值
 var metric = ctx.measureText（text）; 
 console.log（metric.width）; 
 
 ctx.save（）; //这将保存正常的画布返回
 if（maxWidth！= null&& metric.width> maxWidth）{
 //这两种方法将改变一切
 //从这一点开始在画布上绘制
 //因为我们只希望它们应用于这一个fillText，
 //我们使用保存和恢复之前和之后
 
 //我们想要找到文本的中心（或任何你想要的点）并旋转
 var tx = x +（metric.width / 2）; 
 var ty = y + 5; 
 
 //翻译到中心附近，围绕中心旋转
 ctx.translate（tx，ty）; 
 // Then rotate ... 
 ctx.rotate（Math.PI / 2）; 
 //然后翻译回来绘制在正确的地方！ 
 ctx.translate（-tx，-ty）; 
} 
 ctx.fillText（text，x，y）; 
 ctx.restore（）; //这将取消翻译和旋转画布
} 
  

旋转画布后，上下文会永远旋转 ，所以为了停止所有你的新的绘图操作旋转，当你不想要他们，你必须使用保存和恢复到记住正常的，未旋转的上下文。

如果别的什么都没有意义让我知道。有一个很好的时间制作画布应用程序！

Friends, i'm finding rotating a text canvas object a bit tricky. The thing is, I'm drawing a graphic, but sometimes the width of each bar is smaller than the 'value' of that bar. So I have to ratate the 'value' 90 degrees. It will work in most cases.

I am doing the following

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);

Ok, but it doesn't really work. Problems that I have seen: The text duplicates in different angles. The angles are not what I want (perhaps just a matter of trigonometry).

Well I just don't know what to do. I read something about methods like 'save' and 'restore' but I don't what to do with them. I've made some attempts but no one worked.

Would you help me with this, guys?

解决方案

This is a bit tricky to answer simply because there are a lot of concepts going on, so I've made you an example of what I think you'd like to do here:

http://jsfiddle.net/5UKE3/

The main part of it is this. I've put in a lot of comments to explain whats going on:

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
}

To rotate around the right spot you have to translate to that spot, then rotate, then translate back.

Once you rotate the canvas the context is rotated forever, so in order to stop all your new drawing operations from rotating when you dont want them to, you have to use save and restore to "remember" the normal, unrotated context.

If anything else doesn't make sense let me know. Have a good time making canvas apps!

这篇关于HTML5文本在文本宽度大于允许的最大宽度的情况下旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！