0

I'm working with canvases and i can't think of any solution, or find answer on line to my problem.

I have a font that contains symbols\characters from varies sizes - heights and width.

I want to draw some characters (Symbols) from the font and some on top\down of the symbol. The problem is that I can't figure out a way to have the exact height in pixels of the character that i'm drawing, and it's causes unwanted spaces between the center symbol to the one on top\down (for getting the width of a string there is the function context.measureText(theText) ).

for ex. lets say that i want 'X' to be my center symbol. and '-' to be on top. It's looks like this

-
x

but now there is space between the 'X' and the '-' that i don't want.

Can anyone help me with this ?

Thanks

4

3 に答える 3

6

幅は簡単です。キャンバスのコンテキストには、テキスト幅を測定するための組み込みのメトリックがあります。

// this will measure text width
context.font = '14pt Verdana';
var m=context.measureText(yourText);
var theWidth=m.width;

高さは、measureText が高さを計算しないため、より困難です。

多くの場合、フォント サイズを使用して高さを概算できます。それが私が行っていることです。

しかし、本当に精度が必要な場合は、テキストのピクセルを調べて高さを計算する関数を次に示します。

function measureTextHeight(fontSizeFace) {

    // create a temp canvas
    var width=1000;
    var height=60;
    var canvas=document.createElement("canvas");
    canvas.width=width;
    canvas.height=height;
    var ctx=canvas.getContext("2d");

    // Draw the entire a-z/A-Z alphabet in the canvas
    var text="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
    ctx.save();
    ctx.font=fontSizeFace;
    ctx.clearRect(0,0,width,height);
    ctx.fillText(text, 0, 40);
    ctx.restore();

    // Get the pixel data from the canvas
    var data = ctx.getImageData(0,0,width,height).data,
        first = false, 
        last = false,
        r = height,
        c = 0;

    // Find the last line with a non-transparent pixel
    while(!last && r) {
        r--;
        for(c = 0; c < width; c++) {
            if(data[r * width * 4 + c * 4 + 3]) {
                last = r;
                break;
            }
        }
    }

    // Find the first line with a non-transparent pixel
    while(r) {
        r--;
        for(c = 0; c < width; c++) {
            if(data[r * width * 4 + c * 4 + 3]) {
                first = r;
                break;
            }
        }

        // If we've got it then return the height
        if(first != r) return last - first;
    }

    // error condition if we get here
    return 0;
}
于 2013-05-29T21:04:54.133 に答える
1

ここで以前の良い答えに基づいて構築するだけです。これにより、高さと幅が得られます（一部のユニコード文字とメジャーテキストに問題がありましたが、これが一部の文字の唯一の解決策でした）。

function measureTextHeight(fontSizeFace, text) {
  var width = 1500;
  var height = 500;

  var canvas = document.createElement("canvas");
  canvas.width = width;
  canvas.height = height;
  var ctx=canvas.getContext("2d");
  ctx.save();
  ctx.font=fontSizeFace;
  ctx.clearRect(0,0,width,height);
  ctx.fillText(text, parseInt(width * 0.1, 10), parseInt(height / 2, 10));
  ctx.restore();
  document.body.appendChild(canvas);
  var data = ctx.getImageData(0,0,width,height).data;


  var topMost = false;
  var bottomMost = false;
  var leftMost = false;
  var rightMost = false;
  for(var x=0; x<width; x++) {
    for(var y=0; (y<height) && (!leftMost); y++) {
      //console.log("x: %s y: %s index: %s", x,y, getAlphaIndexForCoordinates(x,y,width,height).toString() );
      if(data[getAlphaIndexForCoordinates(x,y,width,height)] != 0) {
        leftMost = x;
      }
    }
  }
  for(var y=0; y<height; y++) {
    for(var x=0; (x<width) && (!topMost); x++) {
      //console.log("x: %s y: %s index: %s", x,y, getAlphaIndexForCoordinates(x,y,width,height).toString() );
      if(data[getAlphaIndexForCoordinates(x,y,width,height)] != 0) {
        topMost = y;
      }
    }
  }
  for(var x=width-1; x>=0; x--) {
    for(var y=height-1; (y>=0) && (!rightMost); y--) {
      //console.log("x: %s y: %s index: %s", x,y, getAlphaIndexForCoordinates(x,y,width,height).toString() );
      if(data[getAlphaIndexForCoordinates(x,y,width,height)] != 0) {
        rightMost = x;
      }
    }
  }
  for(var y=height-1; y>=0; y--) {
    for(var x=width-1; (x>=0) && (!bottomMost); x--) {
      //console.log("x: %s y: %s index: %s", x,y, getAlphaIndexForCoordinates(x,y,width,height).toString() );
      if(data[getAlphaIndexForCoordinates(x,y,width,height)] != 0) {
        bottomMost = y;
      }
    }
  }
  return ({
     width: (rightMost - leftMost) + 1
    ,height: (bottomMost - topMost) + 1
  });
}
function getAlphaIndexForCoordinates(x,y,width,height) {
  return (((width*4*y)+4*x)+3);
}
于 2014-11-07T00:57:13.547 に答える
0

わかりました、このコードを試してみましたが、機能させるために少し変更する必要がありました。

これは、不透明なピクセルを含む最後の行を見つけた後のコードです。

誰かがそれを必要とする場合に備えて。お楽しみください。

    var blnFound = false;
    var intCurrRow = 0;

    // Find the first line with a non-transparent pixel
    while(!blnFound && intCurrRow < last) 
    {
      for(intCurrCol = 0; intCurrCol < width; intCurrCol++) 
      {
        var intCurrDataIdx = intCurrRow * width * 4 + intCurrCol * 4 + 3;
        if(data[intCurrDataIdx]) 
        {
          first = intCurrRow;
          blnFound = true;
          break;
        }
     }

     // If we've got it then return the height
     if (blnFound)
     {
       return last - first;
     }

     intCurrRow++;
   }
于 2013-06-03T15:13:00.330 に答える