filltext() 브라우저 간 캔버스 텍스트 위치 불일치

Question

질문 하단의 스크린 샷이나 directly to the game으로 볼 수 있습니다. 텍스트는 브라우저에 따라 다르게 배치됩니다 (Firefox 15.0.1은 IE 9.9 및 Chrome 21과 다르게 렌더링됩니다). XML 파일에서 정의하는 YSize 구문 분석

function textItem(text, xcoord, ycoord, sizex, sizey,style, context) { 
this.wlines = []; 
this.text = text; 
this.xcoord = xcoord; 
this.ycoord = ycoord; 
this.sizex = sizex; 
this.sizey = sizey; 
this.style = style; 

if (text == null) { 
    text = ""; 
} 
var lines = text.split("~"); 
// this is first line text 
context.save(); 
if (this.style < 3) { 
    context.shadowOffsetY = 2; 
    context.font = 'bold 18px "palatino linotype"'; 
} else if (this.style == 4) { 
    this.font = '16px "palatino linotype"'; 
    this.shadowOffsetX = 2; 
    this.shadowOffsetY = 1; 
    this.shadowColor = "rgba(255,255,255,1)"; 
} 
if (this.style == 5) { 
    this.wlines.push(text); 
} else { 
    for (j = 0; j < lines.length; j += 1) { 
     var words = lines[j].split(" "); 
     var lastLine = ""; 
     var l = sizex; 
     var measure = 0; 
     for (i = 0; i < words.length; i += 1) { 
      var w = words[i]; 
      measure = context.measureText(lastLine + w).width; 
      if (measure < l) { 
       lastLine += (w + " "); 
      } else { 
       //this is body text 
       if (this.style == 6) { 
        lastLine += "..."; 
       } 
       this.wlines.push(lastLine); 
       lastLine = (w + " "); 
       if (this.style < 3) { 
        context.font = 'bold 14px "palatino linotype"'; 
       } 
      } 
      if (i == words.length - 1) { 
       this.wlines.push(lastLine); 
       break; 
      } 
     } 
    } 
} 
context.restore(); 
} 

텍스트, xcoorc, ycoord, xsize : 객체의

context.fillText(this.wlines[i], this.xcoord, this.ycoord + y + (t) * this.sizey); 

생성자 : 호출 기능을 그립니다. 이 예에서 compond 이름 :

<sizex>196</sizex> 
<sizey>20</sizey> 
<xcoord>383</xcoord> 
<ycoord>14</ycoord> 

스타일은 원하는 텍스트 효과에 기초하여 정의 된 값이고 컨텍스트 (효과 계층화)에 그리는 캔버스 2D 컨텍스트이다.

표시된 모든 값은 브라우저간에 동일합니다. 브라우저간에 수행 할 수있는 유일한 확인은 html 페이지의 헤더에

<meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1"/> 

입니다.

필자는 라인 높이 불일치가 어디에서오고 있는지에 대해 정말로 알지 못합니다. 문제에 대한 도움을 주시면 감사하겠습니다.

줄 높이 불일치는 텍스트에 따라 다르지만 아직 계산하지 않은 방식으로 변경됩니다. 누락 된 정보가 있으면 언제든지 물어보십시오. FF : ff screen http://www.sunshinecompound.com/images/firefoxscreen.png 크롬 : chrome screen http://www.sunshinecompound.com/images/googlescreen.png

업데이트 내 프로그램에 대한 해결책은 적어도 오프셋 사용을 구축하는 것이 었습니다. 또한 텍스트 개체를 만든 다음 텍스트 개체를 이미지로 저장하여 성능이 크게 향상되었습니다. 가장 느린 속도의 브라우저 인 FF에서는 전반적인 프로그램 실행 시간이 5 배 이상 감소한 것을 보았습니다. 이것은 텍스트가 프로그램에서 동적으로 변경 될 때마다 텍스트 개체를 다시 만들지 않아도됩니다 (초당 동적 카운터를 변경하고 마우스를 200ms마다 효과를 적용하지만 성능은 현재 100ms로 향상시킬 수 있습니다).

Answer 1

예.

다르게 배치되고, 다르게 조정되고, 다르게 구분되고 별명이 지정되며 브라우저간에 다르게 측정됩니다 (measureText).

당신이 이 게임에 대한 픽셀의 일관성은 다음 텍스트 대신 이미지를 사용해야 할거야 필요합니다. 죄송합니다. :(

일치 measureText을 할 수있는 유일한 방법은 사전에 계산을하는 것입니다.

fillText 일관성을 유지하는 유일한 방법은 텍스트 대신 이미지를 사용하는 것입니다. It's must faster, anyway.

는

이 두 가지 경우지지 할 수 있습니다 텍스트는 극도로 역동적이지만, 앱에 100 가지 미만의 텍스트 만 쓰면 이미지가 가장 좋은 방법 일 것입니다.

그렇지 않으면, 당신은 더 이상, 일반 문자열을 캐시, OK 성능과 희망의 이미지 (각 문자 또는 일반적인 단어로 사용의 drawImage)에서 생성 된 픽셀 글꼴을 사용할 수 있습니다.