我正在制作一个将文本字符串转换为图形字母的新闻自动收报机。字母是使用画布绘制的。创建字母的函数可以完美运行,除了一件事:它不能处理我传递给它的字符串中的空格。
这是将字符串转换为图形形式的函数:
function conv_string(str) {
for (var i = 0; i < str.length; i++) {
console.log(str.charAt(i).toLowerCase());
make_letter(str.charAt(i).toLowerCase(), i);
}
}
conv_string('New Brushes');
这个函数非常简单,它只获取字符串中的每个字符并将其传递给另一个函数 ( make_letter();
),以及该字符在字符串中的位置。现在,它会正确呈现“新”这个词,但是当它到达空间时它会停止。该make_letter();
功能工作正常。这是当前的小提琴。
这是make_letters();
功能:
function make_letter(letter, pos) {
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
var w = parseInt(getComputedStyle(c).width);
var h = parseInt(getComputedStyle(c).height);
var full = Math.floor(h / 16);
var gap = 0.65;
var unit = full - gap;
var capH = (full * 5) - gap;
var inv = {
a: [
[0, 2],
[1, 1],
[1, 3],
[2, 0],
[2, 1],
[2, 2],
[2, 3],
[2, 4],
[3, 0],
[3, 4],
[4, 0],
[4, 4]
],
b: [
[0, 0],
[0, 1],
[0, 2],
[0, 3],
[1, 0],
[1, 4],
[2, 0],
[2, 1],
[2, 2],
[2, 3],
[3, 0],
[3, 4],
[4, 0],
[4, 1],
[4, 2],
[4, 3]
],
c: [
[0, 1],
[0, 2],
[0, 3],
[1, 0],
[1, 4],
[2, 0],
[3, 0],
[3, 4],
[4, 1],
[4, 2],
[4, 3]
],
d: [
[0, 0],
[0, 1],
[0, 2],
[0, 3],
[1, 0],
[1, 4],
[2, 0],
[2, 4],
[3, 0],
[3, 4],
[4, 0],
[4, 1],
[4, 2],
[4, 3]
],
e: [
[0, 0],
[0, 1],
[0, 2],
[0, 3],
[0, 4],
[1, 0],
[2, 0],
[2, 1],
[2, 2],
[2, 3],
[3, 0],
[4, 0],
[4, 1],
[4, 2],
[4, 3],
[4, 4]
],
f: [
[0, 0],
[0, 1],
[0, 2],
[0, 3],
[0, 4],
[1, 0],
[2, 0],
[2, 1],
[2, 2],
[2, 3],
[3, 0],
[4, 0]
],
g: [
[0, 1],
[0, 2],
[0, 3],
[1, 0],
[2, 0],
[2, 2],
[2, 3],
[2, 4],
[3, 0],
[3, 4],
[4, 1],
[4, 2],
[4, 3]
],
h: [
[0, 0],
[0, 4],
[1, 0],
[1, 4],
[2, 0],
[2, 1],
[2, 2],
[2, 3],
[2, 4],
[3, 0],
[3, 4],
[4, 0],
[4, 4]
],
i: [
[0, 1],
[0, 2],
[0, 3],
[1, 2],
[2, 2],
[3, 2],
[4, 1],
[4, 2],
[4, 3]
],
j: [
[0, 4],
[1, 4],
[2, 4],
[3, 4],
[4, 3],
[4, 2],
[3, 1],
[2, 1]
],
k: [
[0, 0],
[1, 0],
[2, 0],
[3, 0],
[4, 0],
[2, 1],
[2, 2],
[1, 3],
[3, 3],
[0, 4],
[4, 4]
],
l: [
[0, 0],
[1, 0],
[2, 0],
[3, 0],
[4, 0],
[4, 1],
[4, 2],
[4, 3],
[4, 4]
],
m: [
[0, 0],
[1, 0],
[2, 0],
[3, 0],
[4, 0],
[1, 1],
[2, 2],
[1, 3],
[0, 4],
[1, 4],
[2, 4],
[3, 4],
[4, 4]
],
n: [
[0, 0],
[1, 0],
[2, 0],
[3, 0],
[4, 0],
[1, 1],
[2, 2],
[3, 3],
[0, 4],
[1, 4],
[2, 4],
[3, 4],
[4, 4]
],
o: [
[0, 1],
[0, 2],
[0, 3],
[1, 0],
[1, 4],
[2, 0],
[2, 4],
[3, 0],
[3, 4],
[4, 1],
[4, 2],
[4, 3]
],
p: [
[0, 0],
[0, 1],
[0, 2],
[0, 3],
[1, 4],
[1, 0],
[2, 0],
[2, 1],
[2, 2],
[2, 3],
[3, 0],
[4, 0]
],
q: [
[0, 1],
[0, 2],
[0, 3],
[1, 0],
[1, 4],
[2, 0],
[2, 4],
[3, 0],
[3, 3],
[3, 4],
[4, 1],
[4, 2],
[4, 3],
[4, 4]
],
r: [
[0, 0],
[0, 1],
[0, 2],
[0, 3],
[1, 4],
[1, 0],
[2, 0],
[2, 1],
[2, 2],
[2, 3],
[3, 0],
[3, 3],
[4, 4],
[4, 0]
],
s: [
[0, 1],
[0, 2],
[0, 3],
[0, 4],
[1, 0],
[2, 1],
[2, 2],
[2, 3],
[3, 4],
[4, 3],
[4, 2],
[4, 1],
[4, 0]
],
t: [
[0, 0],
[0, 1],
[0, 2],
[0, 3],
[0, 4],
[1, 2],
[2, 2],
[3, 2],
[4, 2]
],
u: [
[0, 0],
[0, 4],
[1, 0],
[1, 4],
[2, 0],
[2, 4],
[3, 0],
[3, 4],
[4, 1],
[4, 2],
[4, 3]
],
v: [
[0, 0],
[0, 4],
[1, 0],
[1, 4],
[2, 0],
[2, 4],
[3, 1],
[3, 3],
[4, 2]
],
w: [
[0, 0],
[0, 4],
[1, 0],
[1, 4],
[2, 0],
[2, 2],
[2, 4],
[3, 0],
[3, 1],
[3, 3],
[3, 4],
[4, 0],
[4, 4]
],
x: [
[0, 0],
[1, 1],
[2, 2],
[3, 3],
[4, 4],
[0, 4],
[1, 3],
[3, 1],
[4, 0]
],
y: [
[0, 0],
[1, 1],
[2, 2],
[3, 2],
[4, 2],
[1, 3],
[0, 4]
],
z: [
[0, 0],
[0, 1],
[0, 2],
[0, 3],
[0, 4],
[1, 3],
[2, 2],
[3, 1],
[4, 0],
[4, 1],
[4, 2],
[4, 3],
[4, 4]
],
exc: [
[0, 2],
[1, 2],
[2, 2],
[4, 2]
],
spc: []
};
for (var i = 0; i < inv[letter].length; i++) {
var x = inv[letter][i][1] * full;
var y = inv[letter][i][0] * full;
if (pos == 0) {
var xpos = x;
} else {
var xpos = x + ((pos * full) * 5) + (full * pos);
}
context.beginPath();
context.rect(xpos, y, unit, unit);
context.fillStyle = 'black';
context.closePath();
context.fill();
}
}
我认为问题在于 charAt 如何处理空间。如您所见,我尝试charAt();
在控制台中记录返回的值,但是当它找到空间时,它只返回一个空格。当它找到一个空格时,我怎样才能从这个字符串中获得一个真实的、有形的价值?
如果您查看该make_letter();
函数,您会发现它依赖于与从charAt();
. 因此,如果遇到空格,我需要能够将其与我在对象中设置的值进行比较,但是如何将空格与另一个值进行比较?charAt();
除了我应该使用的东西之外,还有其他东西吗?