2013-01-10 5 views
5

Desidero aggiungere un contorno o un tratto a un testo modificabile UITextView mentre l'utente digita. Esattamente come i memi: http://t.qkme.me/3oi5rs.jpgAggiunta di contorni/tratti a UITextView

enter image description here

devo usare un UITextView da quando ho bisogno di supporto multi linea. Ho provato tutti gli approcci e ho raggiunto la conclusione che devo usare CoreText. Ho quasi risolto tutte le soluzioni, ma sono rimasto bloccato in un punto in cui il testo in textview si chiude. La mia routine drawRect nello subview di UITextView disegna correttamente il testo del contorno finché il testo non viene avvolto. Anche quando l'input dell'utente del testo è avvolto, il testo del contorno che disegna non lo fa. Ecco la mia implementazione del metodo drawRect: https://gist.github.com/4498988. Sulla linea 29, sto usando char avvolgimento:

CTLineBreakMode linebreakmode = kCTLineBreakByCharWrapping; 

ho già provato l'opzione wordwrapping (che è anche l'impostazione predefinita) per alcun uso.

La mia domanda è: Come faccio a ottenere il testo che disegno per avvolgere correttamente in modo che appaia come un contorno al testo digitato?

+0

cosa sta andando male? Qual è la tua domanda? – user1118321

+0

Non capisco neanche la domanda. Che ne dici di mettere qualche ombreggiatura sul testo ?? –

+0

Siamo spiacenti, ha aggiornato la domanda originale per essere più chiara. –

risposta

0

Basta fare una stringa con i CSS

NSString *htmlstring = [[NSString alloc] initWithFormat:@"<html><font style=\"text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87\">%@</font></html>", YourTextView.text, nil]; 

^che renderanno qualsiasi testo è nel bagliore TextView leggere su una pagina web. (Si può anche dare uno sfondo nero se vuoi ... utilizzare questo:

NSString *htmlstring = [[NSString alloc] initWithFormat:@"<html><body bgcolor=\"#000000\"><font style=\"text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87\">%@</font></body></html>", YourTextView.text, nil]; 

Ora salvarlo come file HTML e caricarlo in un UIWebView O iniettarlo in un URL tramite JavaScript. e caricare l'URL in un UIWebView.

Impostare il frame UIWebView e la posizione che corrisponda a quella del vostro UITextView in modo che possa andare ontop di esso e viene visualizzato il testo rosso-incandescente con sfondo nero.

+0

Grazie Albert, ma voglio aggiornare UITextView in "realtime" mentre l'utente sta digitando. Sembra che la tua soluzione mi richieda di posizionare UIWebView dopo che l'utente ha finito le modifiche? –

+0

Si potrebbe disabilitare UIWebView in modo che gli utenti possano fare clic e potrebbero iniziare a digitare e si aggiornerebbero automaticamente (perché non c'è praticamente tempo di caricamento perché il file html è archiviato localmente quindi non è necessario il WiFi o altro per recuperarlo) è possibile aggiungere una linea blu lampeggiante alla fine per simulare che UIWebView è un UITextView e apparirebbe molto realistico, quindi WebView potrebbe essere aggiornato in tempo reale. L'unico arretramento sarebbe provare a spostare il cursore su una parte precedente del testo o provare a selezionare il testo da copiare/incollare .. che non avrebbe funzionato /: –

+0

Se in qualche modo si potesse rendere trasparente il testo su una UITextView potrebbe mettere la vista testuale in cima e quindi gli utenti vedrebbero ancora la linea blu lampeggiante per la posizione corrente dei cursori e gli utenti potrebbero modificare liberamente come se fosse una vera vista testuale anche se vedono un UIWebView. –

0

Crea un file HTML con testo rosso acceso in un campo di testo modificabile (TextArea).

Imposta lo sfondo di tutti gli elementi per essere trasparenti.

Trasformalo in una stringa e caricalo in una UIWebView che si trova sopra l'immagine su cui desideri inserire il testo.

Caricare la stringa HTML in UIWebView e rendere la stessa UIWebView trasparente.

* Potrebbe anche essere necessario rendere UIWebView una proprietà e sintetizzarla.

Ecco il codice (senza la sintesi e proprietà)

.h:

@interface ViewController : UIViewController <uiwebviewdelegate></uiwebviewdelegate> { 
    IBOutlet UIWebView *webView; 
    //... other objects you already have can go here too.. 
} 

.m:

self.webView.delegate = self; 
NSString *htmlstring = [[NSString alloc] initWithFormat:@"<html><body style='background-color: transparent;'><textarea name='myTextArea'cols='20' rows='10' style='text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87; background-color:transparent; border:none'>You Can Edit This Text.</textarea></body></html>"]; 
[self.webView loadHTMLString:htmlstring baseURL:[NSURL fileURLWithPath:[[NSBundle mainBundle] bundlePath]]]; 
self.webView.opaque = NO; 
self.webView.backgroundColor = [UIColor clearColor]; 

Edit: Ecco il codice per la proprietà e sintetizzare della "WebView"

@property(nonatomic,retain)IBOutlet UIWebView *nubrowser; //put in .h file at end of "@Interface" function after the closing curly bracket ("}") 

@synthesize webView; //put in .m file directly after "@implementation" function 
+0

Cambia la dimensione del carattere e il colore del bagliore e tutto ciò che si trova nel innerHTML di htmlstring. Non dimenticare di sintetizzare UIWebView e renderlo una proprietà se prevedi di usarlo con altre cose. –

+0

* Nota: se vuoi che il TextArea html scorra come un UITextView devi aggiungere una proprietà CSS, non posso richiamarlo al momento ma è abbastanza semplice trovarlo su google ... è come un overflow: touch-scroll o qualcosa del genere. –

+0

^Non ne avrai bisogno, questo è solo per le altre persone in futuro che vogliono usare questo metodo per qualcosa di diverso dal mettere il testo su una foto ... –

0
// make your UITextView as a subclass of UITextView 
// and override -drawRect: method in your UITextView subclass 
- (void)drawRect:(CGRect)rect 
{ 
    self.textColor = [UIColor clearColor]; 

    [self setTypingAttributes:[NSDictionary dictionaryWithObjectsAndKeys:self.font, NSFontAttributeName, _textBaseColor, NSForegroundColorAttributeName, nil ]]; // _textBaseColor is any color of your choice 
    CGRect newRect = CGRectMake(0, 0, CGRectGetWidth(self.frame), CGRectGetHeight(self.frame)); 
    CGContextRef context = UIGraphicsGetCurrentContext(); 

    CGContextSetTextDrawingMode(context, kCGTextStroke); 
    // Make the thickness of the outline shadow. and increase the y position of shadow rect by 2. 
    CGContextSetLineWidth(context, (TEXTOUTLINE_PERCENT/100 * self.font.pointSize)+1); // TEXTOUTLINE_PERCENT can be 25. 
    CGContextSetLineJoin(context, kCGLineJoinRound); 
    CGContextSetLineCap(context, kCGLineCapButt); 
    CGContextSetStrokeColorWithColor(context, [UIColor clearColor].CGColor); 
    CGRect shadowrect = newRect; 
    if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone) 
    { 
     shadowrect.origin.y += 0.5; 
    } 
    else 
    { 
     shadowrect.origin.y += 2; 
    } 

    [self.text drawInRect:shadowrect withAttributes:[NSDictionary dictionaryWithObjectsAndKeys:self.font, NSFontAttributeName, SHADOW_COLOR , NSForegroundColorAttributeName, nil]]; // SHADOW_COLOR can be [UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:0.3] 

    // Make the thickness of the outline border of the text. 
    CGContextSetLineWidth(context, TEXTOUTLINE_PERCENT/100 * self.font.pointSize); // TEXTOUTLINE_PERCENT can be 25. 
    CGContextSetStrokeColorWithColor(context, [[UIColor clearColor] CGColor]); 
    [self.text drawInRect:newRect withAttributes:[NSDictionary dictionaryWithObjectsAndKeys:self.font, NSFontAttributeName, self.textOutlineColor , NSForegroundColorAttributeName, nil]]; 

    // Draw filled text. This is the actual text. 
    CGContextSetTextDrawingMode(context, kCGTextFill); 
    CGContextSetFillColorWithColor(context, [[UIColor clearColor] CGColor]); 
    [self.text drawInRect:newRect withAttributes:[NSDictionary dictionaryWithObjectsAndKeys:self.font, NSFontAttributeName, _textBaseColor, NSForegroundColorAttributeName,_textBaseColor, NSStrokeColorAttributeName, nil]]; 
    [super drawRect:rect]; 
} 
+0

Potresti per favore [modificare] la tua risposta per dare una spiegazione del perché questo codice risponde alla domanda? Le risposte al solo codice sono [scoraggiate] (http://meta.stackexchange.com/questions/148272), perché non insegnano la soluzione. – DavidPostill