1

[rainbow] および [/rainbow] タグ内の特定のテキストをレインボー化するために、Flash ベースのチャットに追加した関数を次に示します。

ChatUI.prototype.rainbowParse = function(txt) {
    txt = txt;
    if ((txt.indexOf("[rainbow]") > -1) && (txt.indexOf("[/rainbow]") > -1)) {
        txt = txt.replace("'", "@").replace("'", "@");
        var firstChar = txt.indexOf("[rainbow]") + 9;
        var lastChar = txt.indexOf("[/rainbow]");

        if (((lastChar - firstChar) > 100) || ((txt.split("[rainbow]").length - 1) > 3)) {
            break;
        }

        while (lastChar <= txt.lastIndexOf("[/rainbow]")) {
            var RAINBOWTEXT = '';
            var i = firstChar;
            while (i < lastChar) {
                RAINBOWTEXT += txt.charAt(i);
                i++
            }
            var text = RAINBOWTEXT;
            var texty = '';

            colors = new Array('ff00ff','ff00cc','ff0099','ff0066','ff0033','ff0000','ff3300','ff6600','ff9900','ffcc00','ffff00','ccff00','99ff00','66ff00','33ff00','00ff00','00ff33','00ff66','00ff99','00ffcc','00ffff','00ccff','0099ff','0066ff','0033ff','0000ff','3300ff','6600ff','9900ff','cc00ff');

            i = 0;

            while (i <= text.length) {
                var t = text.charAt(i);

                if (t != undefined) {
                    texty += "<font color=\"#" + colors[i % colors.length] + "\">" + t + "</font>";
                    i++;
                }
            }

            texty = texty.replace("> <", ">&nbsp;<");
            var REPLACEME = "[rainbow]" + RAINBOWTEXT + "[/rainbow]";
            txt = txt.replace(REPLACEME, texty);

            if (lastChar == txt.lastIndexOf("[/rainbow]")) {
                break;
            }
            nextChar = lastChar + 10;
            firstChar = txt.indexOf("[rainbow]", lastChar) + 9;
            lastChar = txt.indexOf("[/rainbow]", lastChar);
        }
        txt = txt.replace("@", "&apos;");
    }
    return txt;
}

しかし、私はこれらの虹がこのように見えるのが好きではありません. テキストの色が繰り返されます。

私が言いたいことの例を見るには、http://www.tektek.org/color/にアクセスして "Rainbow" をクリックし、繰り返しを 1 に設定してプレビューします。次に、3 以上に設定してプレビューします。

コードに 1 の繰り返しを持たせたいのですが、虹のテキストの長さが非常に異なるため、これを行う方法がわかりません。コードを調べようとして、多数のレインボーテキストジェネレーターをグーグルで検索しました。最悪だ。これに関するアイデアや支援をお願いします。:(

4

1 に答える 1

2

色配列の要素数をレインボー文字列の文字数で割り、文字列のその文字数に各色を適用する必要があります。そうすれば、文字列の長さに関係なく、各色が 1 回だけ同じ割合で適用されます。

// Calculate the number of characters to apply each character to
var inc = Math.round(colors.length / txt.length);
// Empty string to store the modified rainbox text in
var str = ""; 
// Loop through each color and apply it to the correct number of characters
for (var i = 0; i < colors.length; i ++) {
    str += "<font color='#'" + colors[i] + "'>" 
        + txt.substr(i * inc, inc)
        + "</font>";
}

編集：

さて、私は質問を読み直して、リンク先の例をもう一度見ました。より良い解決策はSprite、描画 API を使用して線形グラデーションを作成し、虹効果が必要なテキストを含むテキスト フィールドを使用してマスクすることだと思いますそれに適用されます：

import flash.text.TextField;
import flash.text.TextFormat;
import flash.display.Sprite;
import flash.display.GradientType;
import flash.text.TextFieldAutoSize;
import flash.geom.Matrix;
import flash.text.Font;

// You need to embed the font to use it as a mask 
Font.registerFont(Arial);

var txt:String = "My Rainbow text";

// Removed some of your colors to save time formatting
var colors:Array = [0xff00ff, 0xff00cc, 0xff0099, 0xff0066, 0xff0033, 
                    0xff0000, 0xff3300, 0xff6600, 0xff9900, 0xffcc00, 
                    0xffff00, 0xccff00, 0x99ff00, 0x66ff00, 0x33ff00];

var alphas:Array = [];
var ratios:Array = [];

// Populate alphas and ratios arrays of the same length as colors array
for (var i:int = 0; i < colors.length; i ++)
{
    alphas.push(1); 
    ratios.push(i * Math.round(255 / colors.length)); // Equal ratio for each color
}

// Create a text field
var field:TextField = new TextField();
field.text = txt;
field.autoSize = TextFieldAutoSize.LEFT;
field.setTextFormat(new TextFormat("Arial", 30, 0x0000000));
field.embedFonts = true;

// Create a gradient of the same dimensions as the text field
var matrix:Matrix = new Matrix();
matrix.createGradientBox(field.width, field.height);

var gradient:Sprite = new Sprite();
gradient.graphics.beginGradientFill(GradientType.LINEAR, colors, alphas, ratios, matrix);
gradient.graphics.drawRect(0, 0, field.width, field.height);
gradient.graphics.endFill();

this.addChild(field);
this.addChild(gradient);

// Mask the gradient with the text field
gradient.mask = field;
于 2012-05-28T10:07:36.420 に答える