Menu
I'm currently looking into KonvaJS to create like a scrap booking app, and i'm trying to display like a bullet list.
I trying to use a Text shape and add html to the text to see if it will render it, but no luck.
Is this even possible? If so, how? If not, what other ways does KonvaJS have to display fancy text, like lists, bold ext...
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
});
Output: Sorry, I don`t have enough reputation to post images, but the output text is:
<div>this is normal text
<b>This is BOLD</b> </div>
I want it to be something like:
this is normal text
This is BOLD
Any help appreciated, thanks!
230
Actually you can load many icons from font-awesome, and make beautiful web apps:
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>here is a reference for the solution https://stackoverflow.com/a/35581429/3530081
83
Konva can't draw html into canvas. You may use different style options for text such as: fontFamily, fontSize, fontStyle, fontVariant (see docs).
Or you can convert html data into image (or canvas element) with html2canvas, then draw result via Konva.Image.
30
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
