जैसा कि प्रश्न के निचले भाग में स्क्रीनशॉट में देखा जा सकता है या directly to the game पर जाकर। टेक्स्ट ब्राउज़र पर अलग-अलग निर्भर है (फ़ायरफ़ॉक्स 15.0.1 आईई 9.9 और क्रोम 21 अलग-अलग प्रस्तुत करता है)।filltext() कैनवास टेक्स्ट स्थिति विसंगतियों ब्राउज़र के बीच
context.fillText(this.wlines[i], this.xcoord, this.ycoord + y + (t) * this.sizey);
वस्तु के निर्माता:
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, ysize एक xml फ़ाइल से पार्स कर रहे हैं कॉल समारोह आकर्षित करने के लिए। इस उदाहरण में compond नाम:
<sizex>196</sizex>
<sizey>20</sizey>
<xcoord>383</xcoord>
<ycoord>14</ycoord>
शैली पाठ प्रभाव के आधार पर एक निर्धारित मान वांछित है और संदर्भ कैनवास के 2 डी संदर्भ (प्रभाव लेयरिंग के लिए) पर आकर्षित करने के लिए है।
जैसा कि दिखाया गया है कि सभी मान ब्राउज़र के बीच बिल्कुल समान हैं। ब्राउज़र के बीच मैं केवल एक ही चेक
<meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1"/>
HTML पृष्ठ के शीर्षलेख में है।
मुझे सच में नहीं पता कि रेखा ऊंचाई विसंगति कहां से आ रही है और इस मामले पर किसी भी मदद की सराहना की जाएगी।
लाइन ऊंचाई विसंगति पाठ के आधार पर बदलती है लेकिन इस तरह से नहीं कि मैंने अभी तक पता लगाया है। अगर ऐसी कोई जानकारी है जिसे मैंने छोड़ा है तो कृपया पूछने में संकोच न करें। एफएफ: ff screen http://www.sunshinecompound.com/images/firefoxscreen.png क्रोम: chrome screen http://www.sunshinecompound.com/images/googlescreen.png
अद्यतन मेरे कार्यक्रम के लिए समाधान कम से कम उपयोग के निर्माण के लिए एक ऑफसेट था। इसके अलावा मुझे टेक्स्ट ऑब्जेक्ट बनाकर और टेक्स्ट ऑब्जेक्ट को छवि के रूप में सहेजकर भारी प्रदर्शन बढ़ाया गया। एफएफ में जो सबसे बड़ी मंदी के साथ ब्राउज़र था, मैंने समग्र कार्यक्रम रन-टाइम में 5X की कमी से थोड़ा सा देखा। कार्यक्रम में गतिशील रूप से पाठ के हर बार टेक्स्ट ऑब्जेक्ट को फिर से बनाने के बावजूद यह है (मैं प्रति सेकंड गतिशील काउंटर बदलता हूं और प्रत्येक 200ms में माउस होवर प्रभाव डालता हूं लेकिन प्रदर्शन के साथ मैं वर्तमान में 100 एमएमएस में सुधार कर सकता हूं)।
स्क्रीनशॉट/लिंक? – sq2