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

5

实际上，您可以从font-awesome加载许多图标，并制作漂亮的 Web 应用程序：

window.onload = function () {
var stage = new Konva.Stage({
      container: 'container',
      width: 1000,
      height: 1000
    });

    var layer = new Konva.Layer();

    var simpleText = new Konva.Text({
      x: stage.getWidth() / 10,
      y: 15,
      text: "\uf21c",
      fontSize: 300,
      fontFamily: 'FontAwesome',
      fill: 'green'
    });
  layer.add(simpleText);
  stage.add(layer);
  
}
  @font-face {
    font-family: 'FontAwesome';
    src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/fonts/fontawesome-webfont.ttf');
    font-weight: normal;
    font-style: normal;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
   <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css"/>
  <script src="https://cdn.rawgit.com/konvajs/konva/0.11.1/konva.min.js"></script>
  <title>JS Bin</title>
</head>
<body>
  <div id="container" style="font-family:'FontAwesome'">dummyText</div>
</body>
</html>

这是解决方案的参考https://stackoverflow.com/a/35581429/3530081

于 2016-02-23T15:34:36.583 回答
2

Konva 无法将 html 绘制到画布中。您可以对文本使用不同的样式选项，例如：fontFamily、fontSize、fontStyle、fontVariant（请参阅文档）。

或者您可以使用html2canvas将 html 数据转换为图像（或画布元素），然后通过Konva.Image.

于 2015-09-11T15:27:30.907 回答