gpt4 book ai didi

javascript - KonvaJS:文本对象中的 HTML

转载 作者:数据小太阳 更新时间:2023-10-29 05:18:33 30 4
gpt4 key购买 nike

我目前正在研究 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>

我希望它是这样的:

这是普通文本

这是粗体

感谢任何帮助,谢谢!

最佳答案

实际上你可以从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://stackoverflow.com/a/35581429/3530081

关于javascript - KonvaJS:文本对象中的 HTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32517056/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com