元のコードでは、ページ全体の適用を renderDocument で一度だけ設定する ようになっていますが、もう一度 renderDocument を実行すると、既に適用 された要素も対象となるようなので、よろしく無いと思います。 というか、個別の適用はいたって簡単なコードで済みますので狙い撃ちでい いと思います。但し適用前にかならず対象要素の innerHTML を変更しておく 必要があります( 中に canvas が作成されているので ) ※ vml も動作しますが、dummyShape が適用毎に作成されてしまいます
<script src="http://winofsql.jp/js/load_typeface.js"></script> <script type="text/javascript"> if (_typeface_js && _typeface_js.loadFace) _typeface_js.loadFace({"glyphs":{"お":{"x_min":198.03125,"x_max":1182.734375,"ha":1389,"o":"m 359 -75 l 238 -18 l 198 122 q 424 489 257 335 l 416 641 l 254 684 l 246 752 l 410 823 q 546 1030 429 971 q 595 839 573 935 l 733 826 l 744 755 l 598 668 l 598 541 q 1076 419 850 533 q 1171 207 1128 316 q 1104 32 1142 116 q 929 -32 1015 -2 l 774 16 l 717 111 l 774 149 q 939 62 847 81 l 1034 105 l 1071 223 q 988 364 1032 297 l 793 427 l 598 359 q 492 -21 568 164 l 359 -75 m 378 27 q 448 166 419 94 l 435 302 l 427 302 l 341 253 q 287 111 311 185 l 306 37 l 375 24 l 378 27 m 1125 668 l 961 809 l 1018 857 l 1182 714 l 1125 668 "},"え":{"x_min":287.546875,"x_max":1142.03125,"ha":1389,"o":"m 915 -37 l 750 89 q 717 240 741 169 l 649 286 q 298 29 454 196 l 287 116 l 576 508 q 373 592 470 546 l 394 660 q 893 722 641 701 l 899 622 l 725 421 q 845 127 861 307 q 1142 40 969 29 l 1142 32 l 1133 -32 l 915 -37 m 766 884 l 486 906 l 486 976 l 519 976 l 801 952 l 801 884 l 766 884 "},"い":{"x_min":203.140625,"x_max":1188.15625,"ha":1389,"o":"m 408 16 l 249 155 l 203 527 q 284 884 198 736 l 317 900 l 333 798 l 311 497 q 410 146 298 297 l 421 143 q 573 294 514 204 l 627 234 l 557 84 l 408 16 m 1101 354 l 1101 356 l 931 728 l 1007 758 l 1188 375 l 1101 354 "},"う":{"x_min":364.859375,"x_max":1029.453125,"ha":1389,"o":"m 627 -67 l 576 8 q 910 389 826 127 l 866 535 l 706 571 l 413 527 l 364 603 q 801 701 576 684 l 958 625 l 1029 386 l 896 81 l 627 -67 m 834 878 q 522 938 674 906 l 541 1011 l 560 1011 l 863 957 l 863 941 l 850 878 l 834 878 "},"あ":{"x_min":211.59375,"x_max":1212.5625,"ha":1389,"o":"m 885 -75 l 842 -8 l 1029 92 l 1098 256 l 1037 413 l 1010 416 l 866 408 q 687 54 747 245 q 375 -56 535 -8 l 257 -10 l 211 161 q 438 636 309 413 l 435 698 l 290 741 l 282 815 l 440 878 l 505 1028 l 581 1055 q 660 878 614 965 l 942 862 l 945 790 l 649 720 l 598 611 l 636 611 q 820 674 744 603 l 874 665 q 1125 473 980 543 l 1212 245 q 1114 18 1166 130 l 885 -75 m 386 46 q 495 174 448 105 l 470 373 l 465 373 l 378 337 l 301 143 l 320 51 l 383 43 l 386 46 m 646 313 l 646 321 l 701 454 l 690 454 l 611 446 l 611 435 l 638 313 l 646 313 "}},"cssFontWeight":"normal","ascender":1194,"underlinePosition":-96,"cssFontStyle":"normal","boundingBox":{"yMin":-165.46875,"xMin":0,"yMax":1120,"xMax":1318.359375},"resolution":1000,"original_font_information":{"postscript_name":"kirieji_1331984570687","version_string":"Version 1.00","vendor_url":"","full_font_name":"kirieji_1331984570687","font_family_name":"kirieji_1331984570687","copyright":"fub","description":"","trademark":"kirieji_1331984570687","designer":"","designer_url":"","unique_font_identifier":"kirieji_1331984570687","license_url":"","license_description":"","manufacturer_name":"","font_sub_family_name":"Regular"},"descender":-196,"familyName":"kirieji_1331984570687","lineHeight":1389,"underlineThickness":48,"loaded":true}); // ***************************************************************** // 動的に typeface フォントを適用させる // ***************************************************************** function apply_test(no,str) { var e = document.getElementById("unit"+no); e.innerHTML = str; _typeface_js.replaceText(e); e.style.visibility = 'visible'; if (_typeface_js.vectorBackend == 'vml') { var dummyShape = document.createElement('v:shape'); dummyShape.style.display = 'none'; document.body.appendChild(dummyShape); } } </script> <style type="text/css"> .typeface-js { font-family: kirieji_1331984570687; font-size: 100px; } </style> <div id="test_unit" style='height:110px'> <input type="button" value="あ" onclick="apply_test(1,'あ')"> <input type="button" value="い" onclick="apply_test(2,'い')"> <input type="button" value="う" onclick="apply_test(1,'う')"> <input type="button" value="え" onclick="apply_test(2,'え')"> <input type="button" value="お" onclick="apply_test(1,'お')"> <input type="button" value="セットのみ" onclick="document.getElementById('unit1').innerHTML='あい';"> <br /> <span id="unit1" class="typeface-js" style="font-family:kirieji_1331984570687;"></span> <span id="unit2" class="typeface-js" style="font-family:kirieji_1331984570687;"></span> </div>
|
【Three.js & typefaceの最新記事】
- jQuery + Shadowbox.js + Three.js で『画像を蝶のように飛翔させる』デモ表示
- 別ドメインの画像を『テクスチャ』として使った、Three.js(v65) + WebGL キューブアニメーション
- Three.js( Canvas ) デモコード( 背景画像、前景画像、鳥画像変更可 ) : 200のオブジェクトが舞います。
- Three.js + Shadowbox 飛翔する200人の初音ミク
- 最新のThree.js(2012/04/22-r49)は、IEで動かないバグがあります。それと、CanvasRenderer からLambert で テクスチャの処理が削除されました
- Three.js r48 で JSONLoader が Opera で動作しない原因と対処方法
- Three.js で、Blender から出力したデータ(Three.jsフォーマット)の境界線を消す overdraw の適用のさせかた
- 日本語の .ttf をそのまま変換した大きな typeface.js の内容から必要な文字だけを抜き取るツールを作りました( 現在は 切り絵字/水面字/モフ字/青柳隷書しも )
- typeface.js(0.15)で、Operaが正しく動作しない理由
- typeface.js を少し変更して、データに値を追加するとドロップシャドウが実装できるようにしました
- 自作デザインフォントによる、typeface.js での表示テスト