1. Textを表示してみよう

表示する文章は「text」で指定します。日本語でも問題なく表示されるようです。

「Text」は，「width」や「height」では大きさを指定できません。「fontSize」で大きさを指定します。フォントの種類や太さ，斜体なども指定できます。

• 文字の内容のプロパティ「text」
• 文字大きさのプロパティ「fontSize」
• 文字の太さのプロパティ「fontWeight」
• 文字の種類のプロパティ「fontFamily」
• 文字の斜体のプロパティ「fontStyle」
• テキストボックス内の文字位置「textAlign」

// Text
// 以下は変更可能なプロパティのみ

  this.options.content.push({
    //共通プロパティ
    type: 'i-text', 
    left: 0,
    top: 0, 
    width:100, // circle, lineの場合，ここのみ指定 textでは変化しない
    height:100,
    fill:'rgb(255,255,0)',// nullまたは'red' 'rgb(X,X,X)'
    stroke:'black', // nullまたは'red' 'rgb(X,X,X)'
    strokeWidth:'1',
    angle: 0,

    // 独自プロパティ
    // 以下 text関数
    text: '文字が表示',
    fontSize: 64, // text関数での大きさ
    fontWeight: 'normal', //以下フォントWeightについて
    //数値で指定
    //100、200、300、400、500、600、700、800、900でフォント
    //の太さを指定します。太さが9種類用意されているフォントはあ
    //まりないため、数値を上下させても太さが変化しないことがあ
    //ります。標準の太さは400で、数値が小さくなるほど細く、大き
    //くなるほど太くなります。
    //キーワードで指定
    //normal …… 標準の太さです。（数値で400を指定した場合と同じ）
    //bold …… 一般的な太字の太さです。（数値で700を指定した場合と同じ）
    //lighter …… 相対的に一段階細くします。
    //bolder …… 相対的に一段階太くします。

    fontFamily: 'sans-serif', 
    fontStyle: 'normal',//'normal' 'italic' 'oblique'
    textAlign: 'center', //center left right start end
    
  })

以下のように文字が表示されます。