差分

この文書の現在のバージョンと選択したバージョンの差分を表示します。

この比較画面にリンクする

processing:pgraphicsとフォント [2019/09/11 11:08] (現在)
baba 作成
ライン 1: ライン 1:
 +====== PGraphicsでフォント ======
 +PGraphicsが便利なので、時々使うのですが、フォントの設定に関して気をつけなければいけません。
 +通常の使い方だと、setup()でフォントの設定をして、drawで記述すればそのフォントになりますが、PGraphicsを
 +使う場合は少し注意しなければ PGraphcs内で正しいフォント設定ができません。以下は誤った例です。
  
 +<code 日本語がPGraphicsで表示されない.pde .pde>
 +PGraphics canvas;
 +void setup()
 +{
 +  size(400,​200,​ P2D);
 +  canvas = createGraphics(400,​200,​ P2D);
 +  canvas.textFont(createFont("​SanSerif",​24,​ true));
 +  textFont(createFont("​SanSerif",​ 24, true));
 +}
 +
 +void draw()
 +{
 +  background(0);​
 +  canvas.beginDraw();​
 +  canvas.background(0);​
 +  canvas.text("​Hello,​ 日本語 from PGraphics",​ 20, 80);
 +  canvas.endDraw();​
 +  image(canvas,​ 0,0, width, height);
 +  text("​Hello,​ 日本語 from screen",​ 20, 160);
 +}
 +</​code>​
 +{{:​processing:​pasted:​20190911-110237.png}}
 +
 +上記のようになってしまいます。本題であれば、「Hello,​ 日本語 from hogehoge」という形で24ポイントで、日本語がどちらも表示されていなければなりません。ここで理解しておきたいのは、PGraphicsのフォント設定はbeginDraw(),​ endDraw()内に記述しなければ
 +いけない。という点です。つまり具体的には下記のコードにすることで、ただしくフォント設定を行うことができます。
 +
 +<code 正解例.pde .pde>
 +PGraphics canvas;
 +PFont font;
 +void setup()
 +{
 +  size(400,​200,​ P2D);
 +  canvas = createGraphics(400,​200,​ P2D);
 +  font = createFont("​SanSerif",​ 24, true);
 +  textFont(createFont("​SanSerif",​24,​true));​ // この行をコメントアウトすると、hogehoge from screenのテキストが正しくフォント設定されない
 +}
 +
 +void draw()
 +{
 +  background(0);​
 +  canvas.beginDraw();​
 +  canvas.textFont(font);​
 +  canvas.background(0);​
 +  canvas.text("​Hello,​ 日本語 from PGraphics",​ 20, 80);
 +  canvas.endDraw();​
 +  image(canvas,​ 0,0, width, height);
 +  text("​Hello,​ 日本語 from screen",​ 20, 160);
 +}
 +</​code>​
 +{{:​processing:​pasted:​20190911-110805.png}}
  • processing/pgraphicsとフォント.txt
  • 最終更新: 2019/09/11 11:08
  • by baba