Geek Answers Handbook

KonvaJS: HTML in a text object

I'm currently looking for KonvaJS to create a scrap reservation application, and I'm trying to display it as a bullet list.

I am trying to use a form of text and add html to the text to see if it will display it, but will fail.

Is it possible? If so, how? If not, in what other way should KonvaJS display fancy text, such as 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 });

Conclusion: Sorry, I do not have enough reputation for posting images, but the output is:

 <div>this is normal text <b>This is BOLD</b> </div>

I want this to be something like:

this is plain text

This is BOLD

Any help appreciated, thanks!

+5
source share
2 answers

In fact, you can download many icons from font-awesome and create beautiful web applications:

 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 the link for solving fooobar.com/questions/92291 / ...

+5
source

Conwa cannot draw html on canvas. You can use various style options for text, such as fontFamily, fontSize, fontStyle, fontVariant (see docs ).

Or you can convert the html data to an image (or canvas element) using html2canvas , then draw the result using Konva.Image .

+1
source

More articles:


All Articles