Prototyp zur Positionsermittlung innerhalb eines Textfeldes

[derRaab]

Hallo Leute,

ich habe eine Funktion erstellt, mit der sich die Koordinaten eines bestimmten Strings innerhalb eines Textfeldes ermitteln lassen.

Leider funktioniert meine Lösung nicht mit HTML-Textfeldern, aber ich denke auch so ist sie sehr nützlich.

Ich habe schon etwas getestet, würde euch aber bitten noch mal auf eurem System verschiedene Test, mal mit eingeschlossenem Text, mal mit Systemschrift und in verschiedenen Größen und Variationen durchzuführen. Vor allem interessiert mich, was MAC-User sagen und Leute mit ranzigen Rechnern.

Ich habe das Ganze als Prototypen angelegt, da ich in dieser Projektumgebung leider nur auf Flash MX zurückgreifen kann. Umschreiben als AS2.0-Klasse ist ja kein Problem.

Hm, ich komme mit dem Forumsupdate noch nicht ganz klar. AS-Highlight scheint noch nicht möglich zu sein. Deshalb einfach als PHP-Highlight-Version:

Hier also erst mal der Prototyp:

PHP-Code:

TextField.prototype.getTextCoordinates = function (str:String, depth:Number) {
    /*

    derRaab(); - [url]http://www.derRaab.com[/url]

        Liefert einen Array mit den Koordinaten des Strings
        innerhalb des Textfeldes zurück
    
        Arguments : str   ->  der zu suchende Teilstring
                    depth ->  eine freie Ebene, auf der gearbeitet werden kann
        */
        
    // Wenn depth nicht übergeben wurde, einen Standardwert verwenden
    var depth = (depth == undefined) ? 9876 : depth;
    
    // Auf dieser Ebene einen temporären MovieClip
    // zur Ermittlung der Position erstellen    
    var mc:MovieClip = this._parent.createEmptyMovieClip ("RAAB_TEXTFIELD_POSITION_CHECK_TEMP_MC", depth);
    
    // Darin eine Kopie dieses Textfeldes anlegen
    mc.createTextField ("tmp_txt", 1, 0, 0, this._width, this._height);
    var tmp_txt = mc.tmp_txt;
    tmp_txt.setNewTextFormat (this.getTextFormat ());
    var param = new Array ('multiline', 'wordWrap', 'embedFonts', 'type');
    for (var i = 0; i < param.length; i++) {
        tmp_txt[param[i]] = this[param[i]];
    }
    tmp_txt.autoSize = 'left';
    
    // Text bis einschließlich zum gesuchten String anzeigen
    var previous_str = this.text.split (str)[0];
    tmp_txt.text = previous_str + str;
    
    // Textfeldbedingter Versatz
    // (Text fängt nicht direkt in der linken oberen Ecke an)
    var offset = 2;
    
    // Unterkante des Textes
    var bottom = tmp_txt._height - offset;
    
    var singleLineHeight = tmp_txt._height / tmp_txt.bottomScroll;
    
    // Oberkante des Textes
    var top = bottom - singleLineHeight - offset;
    
    // letzte Zeile im Textfeld ermitteln
    tmp_txt.text = '';
    var textParts = previous_str.split (' ');
    for (var i = 0; i < textParts.length; i++) {
        tmp_txt.text += textParts[i] + ((i < textParts.length - 1) ? ' ' : str);
        if (bottom == tmp_txt._height - offset) {
            // Abbrechen, damit i den richtigen Wert behält
            break;
        }
    }
    tmp_txt.text = '';
    for (i; i < textParts.length; i++) {
        tmp_txt.text += textParts[i] + ((i < textParts.length - 1) ? ' ' : '');
    }
    
    // Linke Kante
    var left = tmp_txt.textWidth + offset;
    
    tmp_txt.text += str;
    
    // Rechte Kante
    var right = tmp_txt.textWidth + offset;
    
    // temporären MovieClip wieder entfernen
    mc.removeMovieClip ();
    
    // Rückgabe der ermittelten Werte
    var a = new Array ();
        a['bottom'] = this._y + bottom;
        a['top'] = this._y + top;
        a['left'] = this._x + left;
        a['right'] = this._x + right;
    return a;
}; 


Und nun noch das Testscript. Bitte verändert einfach mal die Parameter und Textmenge.

PHP-Code:

//
// TextFormat
var tf = new TextFormat();
    tf.font = 'verdana';
    tf.size = 30;

//
// TextFeld
this.createTextField("my_txt",1, 30, 30, 300, 100);
my_txt.wordWrap = true;
my_txt.autoSize = 'left';
my_txt.text = "Das ist der Text, der durchsucht und weiterbearbeitet, geparst usw. werden soll nach 'Lücke' und deren x und y Position ermittelt.";
my_txt.setTextFormat(tf);

//
// Koordinaten ermitteln
var coords = my_txt.getTextCoordinates('Lücke',2);

//
// gesuchten Text markieren
this.createEmptyMovieClip("mark_mc",3);
with (mark_mc){
    _x = coords['left'];
    _y = coords['top'];
    width = coords['right'] - coords['left'];
    height = coords['bottom'] - coords['top'];
    lineStyle(0);
    lineTo(width, 0);
    lineTo(width, height);
    lineTo(0, height);
    lineTo(0,0);
} 


So, nun bin ich mal auf eure Testberichte gespannt. Jetzt sollte eine Lückentextaufgabe kein großes Problem mehr darstellen. (Dafür brauche ich das zumindest)!

[derRaab]

Hallo Leute!

Hat's noch keiner probiert? Glaube ich nicht.

Also, einfach mal einen Erfahrungsbericht hinterlegen.

Bitte

[derRaab]

Hier noch eine Testfunktionalität.

Einfach einen Array mit den Lückenwörtern übergeben.

PHP-Code:

function test(_array){
    // Koordinaten ermitteln
    for (var i = 0 ; i < _array.length; i++){
        var coords = my_txt.getTextCoordinates(_array[i],2);
        
        //
        // gesuchten Text markieren
        this.createEmptyMovieClip("mark"+i+"_mc",i+3);
        with (this["mark"+i+"_mc"]){
            _x = coords['left'];
            _y = coords['top'];
            width = coords['right'] - coords['left'];
            height = coords['bottom'] - coords['top'];
            lineStyle(0);
            lineTo(width, 0);
            lineTo(width, height);
            lineTo(0, height);
            lineTo(0,0);
        }
    }
}
test(['Lücke','Generalsekretär','Merkel', 'Berlin', 'Ministerpräsident','Bayern', 'Arbeit']); 


[Janoscharlipp]

bei mir wird nichts gemalt.

leider grad keine Zeit, aber zumindst das malen klappt nicht.

in coords steht aber etwas drinn, ich melde mich morgen nochmal.
Aber an sich aufjeden Fall ne sehr praktische Sache!

[derRaab]

So Leute,

vielleicht bringe ich euch ja so dazu, mir etwas Feedback zu geben.

Also hier eine recourcefressende Testdatei als Flash 6 exportiert ( 5 kb ):

TESTDATEI

Dann solltet Ihr innerhalb des langen Fließtextes sieben Wörter mit einem roten Rahmen markiert dargestellt bekommen.

Mich interessiert die Performance auf den unterschiedlichen Systemen und Plugins. Auf WIN 6,0,21,0 sollte es gar nicht gehen z.B.!

Hier mal meine Testergebnisse zum Vergleich:

System: WIN XP Pro, P4 3Ghz, 1GB RAM
Plug-in ( hier ermittelbar ): WIN 7,0,19,0
benötigte Zeit: 3193 (ms)

Also ich hoffe nun kommt etwas mehr Feedback. Welche Erfahrungen macht Ihr?

[atothek]

das funktioniert schon ist aber wirklich etwas langsam. ich mache auch lernsoftware und da ist das zu langsam für (leider) ich hab mich auch mal dran versucht bin aber ehrlich gesagt nicht soweit gekommen wie du(ich hab aus zeitgründen aufgeben müßen) für den ansatz auf jedenfall daumen hoch.

athlon xp 2000
win xp
flash 7...
3800 ms

[derRaab]

Muß man halt dann aufsplitten. Kein Problem. Vor allem ist mir wichtig ob das auf allen Systemen zuverlässig die richtige Position ausgibt. Egal wie lange das momentan dauert.

Ich hätte allerdings auch gerne eine andere Lösung gefunden.

[Lodi]

Ich weiß nicht ob du derartiges Feedback willst, bei diesem System hier:

PII 266
128 MB RAM
Win98 SE
Flash 7

Ergebnis ist 32921 ms. *brrr*

Naja, is halt die Kiste wo ich dran arbeite, nicht meine private

[mathilda]

Bitte schön Raab, hier mein Ergebnis:

System: WIN XP, AMD Athlon, 261.616 KB RAM
Plug-in : WIN 7,0,19,0
benötigte Zeit: 4227(ms)

Grüße,

mathilda

[atothek]

@lodi na was arbeiteste denn an so na kiste ????

[Lodi]

Momentan administriere ich verschiedene Webseiten. Bildergallerien hochladen und so.
Und für PHP/MySQL reicht die Kiste auch.

Bin z.Z. Praktikant. Da gibt man sich eh mit dem zufrieden, was man bekommt


P.S.:
Sorry daß ich auf athotek's dreistes Off-topic reinfalle

[Stefan H.]

System: WIN 2k Pro, AMD Opteron 1.4Ghz, 512MB RAM
Plug-in : WIN 7,0,19,0
Zeit: 3839 (ms)

top ! funktioniert prima, manchmal bisschen zu hoher offset aber is sicher bissel blöd da es ja
von schrift zu schrift anders ist .. habs grad nur überflogen - verträgt nochn bissel optimierung
damits bissel flotter geht aber ansonsten wie gesagt top !

hab mir grad ne kleine textfield.duplicate geschrieben, vleicht hilft die schon mal bisschen ..

hier isse :

PHP-Code:

TextField.prototype.duplicate = function (instanceName:String, depth:Number) {
    /* Stefan Hofeditz [com.sh@gmx.de] (c) 2004     */
    this._parent.createTextField(instanceName, depth, this._x, this._y, this._width, this._height);
    this._parent[instanceName].setNewTextFormat(this.getTextFormat());
    for(var i in this) if(i != 'variable') this._parent[instanceName][i] = this[i];
    return this._parent[instanceName];
}
ASSetPropFlags(TextField.prototype, "duplicate", 1); 


kopiert aber alle eigentschaften eines textfeldes, willst du welche nicht haben musst du sie im nachhinnein ändern.

cheers sh.

ps: nich vergessen die font in die libary zu schicken und für as zu exportieren

[derRaab]

Ich weiß nicht so recht, was ich noch großartig optimieren sollte. Lasse mich da aber gerne noch inspirieren.

Das mit dem kompletten Kopieren des MovieClips habe ich absichtlich nicht gemacht, da ich sonst immer alle Eigenschaften des Textfeldes ansprechen müsste und danach zusätzlich nochmal einige Parameter zurücksetzen.

Ansonsten sollte die Positionierung schon einwandfrei funktionieren. Die einzige Ungenauigkeit ergibt sich durch den Parameter 'offset' innerhalb der Funktion. Ein Textfeld fängt ja leider nie exakt links oben mit der Zeichnung der Buchstaben an sondern hat ja noch einen kleinen Versatz. Dem Versuche ich mit 2 Pixeln auszugleichen. Bin noch nicht ganz dahinter gestiegen, wie dieser Abstand exakt definiert ist. Vielleicht hat da jemand noch einen Schimmer?

Ansonsten frohes Testen weiterhin!

[poedder]

System: WIN XPro, AMD Athlon 900, 512MB RAM
Plug-in : WIN 7,0,19,0
Zeit: 10324 (ms)

nich gerade der schnellste bei mir

[son yu]

System: G3 800Mhz OS X 10.2.8
Plug-in : mac 7.0.19.0
benötigte Zeit: 12401ms

also die woerter sind auch nicht wirklich umrahmt!

schoene gruesse