8

私は現在、KonvaJS を調べて、スクラップ予約アプリのように作成し、箇条書きのように表示しようとしています。

テキストシェイプを使用し、テキストに html を追加して、レンダリングされるかどうかを確認しようとしましたが、うまくいきません。

これは可能ですか？もしそうなら、どのように？そうでない場合、KonvaJS がリスト、太字の拡張などの派手なテキストを表示するために他にどのような方法が必要ですか?

    var text = new Konva.Text({
      text: '<div>this is normal text\n\n <b>This is BOLD</b> </div>',
      fontSize: 8,
      fontFamily: 'Calibri',
      fill: '#555',
      width: 300,
      padding: 20,
      align: 'center',
      stroke: 'black',
      strokeEnabled: false,
      strokeWidth: 0
    });

出力: 申し訳ありませんが、画像を投稿するのに十分な評判がありませんが、出力テキストは次のとおりです。

<div>this is normal text

<b>This is BOLD</b> </div>

次のようなものにしたい：

これは通常のテキストです

これは大胆です

どんな助けでも感謝します、ありがとう!

4

2 に答える 2

2

Konva は html をキャンバスに描画できません。fontFamily、fontSize、fontStyle、fontVariant など、さまざまなスタイル オプションをテキストに使用できます ( docsを参照)。

または、 html2canvasを使用して html データを画像 (またはキャンバス要素) に変換し、 を介して結果を描画することもできますKonva.Image。

于 2015-09-11T15:27:30.907 に答える