Блог

Друзья, я нахожу поворот объекта текстового холста немного сложным. Дело в том, что я рисую графику, но иногда ширина каждой строки меньше, чем «значение» этой строки. Поэтому я должен оценить «значение» на 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);
  

Хорошо, но на самом деле это не работает. Проблемы, которые я видел: текст дублируется под разными углами. Углы — это не то, что я хочу (возможно, просто вопрос тригонометрии).

Ну, я просто не знаю, что делать. Я кое-что читал о таких методах, как «сохранить» и «восстановить», но я не знаю, что с ними делать. Я предпринял несколько попыток, но никто не работал.

Не могли бы вы помочь мне с этим, ребята?

На этот вопрос немного сложно ответить просто потому, что существует множество концепций, поэтому я привел вам пример того, что, я думаю, вы хотели бы сделать здесь:

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 amp;amp; 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 «запоминать» обычный, невращаемый контекст.

Если что-то еще не имеет смысла, дайте мне знать. Приятного вам создания приложений для холста!