KonvaJS: HTML w obiekcie tekstowym

Obecnie szukam w KonvaJS, aby utworzyć aplikację rezerwującą złom i staram się wyświetlać jak lista punktorów.KonvaJS: HTML w obiekcie tekstowym

Próbuję użyć kształtu tekstu i dodać html do tekstu, aby zobaczyć, czy wyrenderuje go, ale bez powodzenia.

Czy to możliwe? Jeśli tak to jak? Jeśli nie, to jakie są inne sposoby nie KonvaJS mieć do wyświetlania tekstu ozdobnego, jak list, pogrubienie wew ...

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 
    });

wyjściowa: Niestety, Nie znam wystarczająco dużo reputacji do zamieszczania zdjęć, ale tekst jest wyjście :

<div>this is normal text 

<b>This is BOLD</b> </div>

I ma to być coś takiego:

to normalny tekst

to BOLD

Każda pomoc doceniona, dzięki!

Źródło

2015-09-11 Wayne Barnard

głosowałem się zachęcić was zadać dobre pytanie, takie jak to, i przesłać zdjęcia :) –

Właściwie można załadować wiele ikon z font-awesome i zrobić piękne aplikacje internetowe:

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>

tu jest odniesienie do roztworu https://stackoverflow.com/a/35581429/3530081

Źródło

2016-02-23 15:34:36

Konva nie może narysować html na płótnie. Możesz użyć różnych opcji stylu dla tekstu, takich jak: fontFamily, fontSize, fontStyle, fontVariant (patrz docs).

Lub możesz przekonwertować dane html na obraz (lub element canvas) na html2canvas, a następnie narysuj wynik przez Konva.Image.

Źródło

2015-09-11 15:27:30 lavrton

KonvaJS: HTML w obiekcie tekstowym

Odpowiedz

Powiązane problemy