文本对象中的HTML
KonvaJS: HTML in a Text object
我目前正在研究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>
我希望它是这样的:
这是正常的文本
This is BOLD
任何帮助感激,谢谢!
实际上你可以从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
Konva无法将html绘制到画布中。你可以为文本使用不同的样式选项,如:fontFamily, fontSize, fontStyle, fontVariant(见文档)。
或者你可以用html2canvas将html数据转换成图像(或画布元素),然后通过Konva.Image
绘制结果。
相关文章:
- 枚举附加到文档的HTML对象的所有事件
- JS for循环来设置HTML对象参数
- 为什么不显示多个HTML对象对象
- 如何将html对象传输到浏览器
- Jquery使用html对象添加更多内容
- 从 jQuery 中的 HTML 对象中删除禁用的属性
- HTML 对象在使用 ContentPlaceHolder 时在 Javascript 中显示为未定义
- 使用 Javascript 的动态 HTML:用不同的内容填充相同的 HTML 对象
- 使用 node.js 和 javascript 更新 HTML 对象
- 如何使动态插入的 html 对象可单击
- 读取HTML对象标记中的数据
- JavaScript+addEventListener'单击'在select html对象上忽略
- 创建HTML对象的Javascript与创建HTML字符串的比较
- Html对象标记:访问Html页面中的元素
- 一次加载HTML对象并多次使用
- 使用cookie读取html对象的id
- 未捕获的类型错误:对象#<HTML对象元素>没有方法'重新绘制工作流'
- 使用JavaScript更改HTML对象
- 显示HTML对象
- Knockoutjs 绑定到复杂的 html 对象