KonvaJS：文本对象中的 HTML
Posted
技术标签:
【中文标题】KonvaJS：文本对象中的 HTML【英文标题】：KonvaJS: HTML in a Text object 【发布时间】：2015-12-07 15:16:33 【问题描述】：我目前正在研究 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>
我希望它是这样的：
这是正常的文字
这是粗体
任何帮助表示赞赏，谢谢！
【问题讨论】：
我投票鼓励你提出像这样的好问题，并上传图片:) 【参考方案1】：其实你可以从font-awesome加载很多图标，制作漂亮的网络应用：
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://***.com/a/35581429/3530081
【讨论】：
【参考方案2】：Konva 无法将 html 绘制到画布中。您可以对文本使用不同的样式选项，例如：fontFamily、fontSize、fontStyle、fontVariant（请参阅docs）。
或者你可以使用html2canvas将html数据转换成图片（或canvas元素），然后通过Konva.Image绘制结果。
【讨论】：
以上是关于KonvaJS：文本对象中的 HTML的主要内容，如果未能解决你的问题，请参考以下文章