1

我正在制作一个将文本字符串转换为图形字母的新闻自动收报机。字母是使用画布绘制的。创建字母的函数可以完美运行,除了一件事:它不能处理我传递给它的字符串中的空格。

这是将字符串转换为图形形式的函数:

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();除了我应该使用的东西之外,还有其他东西吗?

4

3 回答 3

3

您实际上是在尝试将字符映射到它们的名称和' '.toLowerCase() !== 'spc'. 名称错误,导致抛出异常。

如您在此处看到的,更改spc密钥以' '修复错误。

于 2015-05-05T16:06:26.947 回答
2

我认为问题在于如何charAt处理空间。如您所见,我尝试charAt();在控制台中记录返回的值,但是当它找到空间时,它只返回一个空格。

是的,这就是它的工作。charAt为您提供给定位置的角色。

当它找到一个空格时,我怎样才能从这个字符串中获得一个真实的、有形的价值?

您可以使用charCodeAt来获取字符代码。

因此,如果遇到空格,我需要能够将其与我在对象中设置的值进行比较,但是如何将空格与另一个值进行比较?

比较空间没有什么特别之处。但是,使用空格作为属性名称有一些特别之处,就像您可能希望在inv对象中那样。最后你有:

spc: []

...创建一个名为 的属性spc。当然,这与空间不同。如果您愿意,可以创建带有空格的属性:

" ": []

同样,没有什么charAt能让你永远匹配这个:

exc: [
    [0, 2],
    [1, 2],
    [2, 2],
    [4, 2]
],

我不知道是什么exc意思,但如果是!,那么:

"!": [
    [0, 2],
    [1, 2],
    [2, 2],
    [4, 2]
],

您可以在对象初始化程序中使用任何字符串作为属性名称,只需将其放在引号中。

于 2015-05-05T16:06:52.977 回答
0

只需更换

spc: [] 

' ': []
于 2015-05-05T16:10:07.297 回答