HTML5 Canvas API-用斜体格式化单个单词 [英] HTML5 Canvas API - formatting individual words with italics
问题描述
我在HTML5中使用Canvas API时遇到了一个小问题. 我有一个文本，必须在html页面的画布上显示.
文本示例可以是"This is Italic word". 因此，我要做的是显示我从数据库中获得的文本，但仅从斜体字中提取一个单词.所以我必须显示这样的文本:
"这是一个斜体字""
所以我的代码如下:
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
//text
context.fillStyle = "#000000";
context.font = "20px Sans-Serif";
context.textBaseline = "top";
context.fillText ("This is an ", 195, 80 );
context.font = "italic 20px Sans-Serif";
context.fillText ("Italic", 285, 80 );
context.font = "20px Sans-Serif";
context.fillText ("text", 330, 80 );
因此，这段代码实际上并不是动态的，我一直有时间知道正确的像素，从句的其余部分开始. 有人知道如何动态，干净地解决此问题吗?
要获得某种灵活性，您必须确定文本内部的约定以告知样式已更改.
而且，您还必须使用measureText才能填充文本的单独行"，每个行都使用正确的样式，measureText(thisRun).width将为您提供当前行的大小(以像素为单位).
然后，您需要绘制单独的文本行，每个文本行都有自己的样式，然后根据measureText的返回值在光标"上移动.
举个简单的例子，我以样式约定§r" =常规文本，§i" =斜体，§b" =粗体，§l" =较浅，因此字符串:
var text = "This is an §iItalic§r, a §bbold§r, and a §llighter§r text";
将输出为:
小提琴在这里:
http://jsfiddle.net/gamealchemist/32QXk/6/
代码是:
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// marker used in the text to mention style change
var styleMarker = '§';
// table code style --> font style
var styleCodeToStyle = {
r: '',
i: 'italic',
b: 'bold',
l: 'lighter'
};
// example text
var text = "This is an §iItalic§r, a §bbold§r, and a §llighter§r text";
// example draw
drawStyledText(text, 20, 20, 'Sans-Serif', 20);
// example text 2 :
var text2 = "This is a text that has separate styling data";
var boldedWords = [ 3, 5, 8 ];
var italicWords = [ 2, 4 , 7];
var words = text2.split(" ");
var newText ='';
for (var i=0; i<words.length; i++) {
var thisWord = words[i];
if (boldedWords.indexOf(i)!=-1)
newText += '§b' + thisWord + '§r ';
else if (italicWords.indexOf(i)!=-1)
newText += '§i' + thisWord + '§r ';
else
newText += thisWord + ' ';
}
drawStyledText(newText, 20, 60, 'Sans-Serif', 20);
function drawStyledText(text, x, y, font, fontSize) {
// start with regular style
var fontCodeStyle = 'r';
do {
// set context font
context.font = buildFont(font, fontSize, fontCodeStyle);
// find longest run of text for current style
var ind = text.indexOf(styleMarker);
// take all text if no more marker
if (ind == -1) ind = text.length;
// fillText current run
var run = text.substring(0, ind);
context.fillText(run, x, y);
// return if ended
if (ind == text.length) return;
// move forward
x += context.measureText(run).width;
// update current style
fontCodeStyle = text[ind + 1];
// keep only remaining part of text
text = text.substring(ind + 2);
} while (text.length > 0)
}
function buildFont(font, fontSize, fontCodeStyle) {
var style = styleCodeToStyle[fontCodeStyle];
return style + ' ' + fontSize + 'px' + ' ' + font;
}
I have a small problem using Canvas API in HTML5. I have a text that I have to show on a canvas in an html page.
The text example can be "This is an Italic word". So what I have to do is display this text that I take from the database, but to make just one word from the sentence Italic. So I have to display the text like this:
"This is an Italic word"
So my code looks like this:
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
//text
context.fillStyle = "#000000";
context.font = "20px Sans-Serif";
context.textBaseline = "top";
context.fillText ("This is an ", 195, 80 );
context.font = "italic 20px Sans-Serif";
context.fillText ("Italic", 285, 80 );
context.font = "20px Sans-Serif";
context.fillText ("text", 330, 80 );
So this code is not actually dynamic and I have all the time to know the correct pixel where to start the rest of the sentence. Does anybody have an idea how can I solve this issue dynamically and clean ?
To achieve some kind of flexibility, you have to decide of a convention inside your text that will tell that the style changed.
And also, you'll have to use measureText to be able to fillText separate 'runs' of the text, each run using the right style, measureText(thisRun).width will give you the size in pixels of the current run.
Then what you need is to draw separate text runs, each in its own style, then move on the 'cursor' based on the return value of measureText.
For a quick example, i took as styling convention "§r" = regular text, "§i" = italic, "§b" = bold, "§l" = lighter, so the string :
var text = "This is an §iItalic§r, a §bbold§r, and a §llighter§r text";
will output as :
fiddle is here :
http://jsfiddle.net/gamealchemist/32QXk/6/
The code is :
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// marker used in the text to mention style change
var styleMarker = '§';
// table code style --> font style
var styleCodeToStyle = {
r: '',
i: 'italic',
b: 'bold',
l: 'lighter'
};
// example text
var text = "This is an §iItalic§r, a §bbold§r, and a §llighter§r text";
// example draw
drawStyledText(text, 20, 20, 'Sans-Serif', 20);
// example text 2 :
var text2 = "This is a text that has separate styling data";
var boldedWords = [ 3, 5, 8 ];
var italicWords = [ 2, 4 , 7];
var words = text2.split(" ");
var newText ='';
for (var i=0; i<words.length; i++) {
var thisWord = words[i];
if (boldedWords.indexOf(i)!=-1)
newText += '§b' + thisWord + '§r ';
else if (italicWords.indexOf(i)!=-1)
newText += '§i' + thisWord + '§r ';
else
newText += thisWord + ' ';
}
drawStyledText(newText, 20, 60, 'Sans-Serif', 20);
function drawStyledText(text, x, y, font, fontSize) {
// start with regular style
var fontCodeStyle = 'r';
do {
// set context font
context.font = buildFont(font, fontSize, fontCodeStyle);
// find longest run of text for current style
var ind = text.indexOf(styleMarker);
// take all text if no more marker
if (ind == -1) ind = text.length;
// fillText current run
var run = text.substring(0, ind);
context.fillText(run, x, y);
// return if ended
if (ind == text.length) return;
// move forward
x += context.measureText(run).width;
// update current style
fontCodeStyle = text[ind + 1];
// keep only remaining part of text
text = text.substring(ind + 2);
} while (text.length > 0)
}
function buildFont(font, fontSize, fontCodeStyle) {
var style = styleCodeToStyle[fontCodeStyle];
return style + ' ' + fontSize + 'px' + ' ' + font;
}
这篇关于HTML5 Canvas API-用斜体格式化单个单词的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
