2011-08-17 20 views
14

Tuvalde fillText kullanarak özel karakterleri yazı tipinde görüntülemek istiyorum. kod temelde:Sorun anlama tuval fillText ile unicode karakterler

canvas = document.getElementById("mycanvas"); 
context = canvas.getContext("2d"); 

hexstring = "\u00A9"; 
//hexstring = "\\u" +"00A9"; 

context.fillText(hexstring,100,100); 

İlk hexstring kullanırsanız, çalışır ve telif hakkı sembolü olsun. İkincisini kullanırsam, sadece \u00A9 görüntüler. Sayıları yinelemem gerektiğinden, bir yazı tipinin tüm özel karakterlerini görüntülemek için ikincisini kullanmam gerekir. Utf-8 kullanıyorum. Neyi yanlış yapıyorum?

cevap

27

kullanın String.fromCharCode bir karakter bir sayı çevirmek . Eğer bir onaltılık kodlanmış dize varsa

var c= 169; // 0xA9 
context.fillText(String.fromCharCode(c), 100, 100); 

önce bir onaltılık sayı olarak o ayrıştırabilir:

var h= '00A9'; 
String.fromCharCode(parseInt(h, 16)); 

karakterlerin aralığını içeren bir dize oluşturmak için, sayıların bir Array yaratabilecek ve sonra fromCharCode'a argümanlar olarak iletmek için apply kullanın. Bu, her karakter için ayrı ayrı string= string+String.fromCharCode(c) yapmasından daha hızlıdır. Aşağı oy neden bu işleri

function makeRange(n0, n1) { 
    var a= []; 
    for (; n0<n1; n++) 
     a.push(n0); 
} 

var someChars= makeRange(0xA9, 0xFF); 
var stringOfChars= String.fromCharCode.apply(String, someChars); 
+1

için destek ve Tabii ki, StackOverflow yine kurtarmam için geliyor. Teşekkürler bobince! –

0

çalışma örneği

http://jsfiddle.net/sbYPj/

Eval zaman :)

yinelerler num yoluyla

ve bu çalışacaktır gayet

var num = value; 
var uni = '"\\u' + num+'"'; 
var result; 
if (/^[A-F\d]{4}$/.test(num)) 
{ 
    result = eval(uni); 
} 
+0

.... – samccone

+1

Geri alındı ​​regex onay acil güvenlik açığını giderir, ama yine de 'eval', yavaş çirkin, tehlikeli ve yana downvote [genellikle] (http: // stackoverflow .com/questions/86513/why-is-using-javascript-eval-function-a-bad-idea) en iyi şekilde kaçınıyor. – bobince

+1

[Bu cevabı okuduğumda ilk düşündüğüm şey buydu.] (Http://www.youtube.com/watch?v=TO5wryDdEI0) Gün boyunca tüm oylarımı kullandım; Dört saat içinde geri gelmeyi hatırlamaya çalışacağım. – sdleihssirhc