KonvaJS: HTML in un oggetto di testo

Attualmente sto cercando KonvaJS come un'app di prenotazione di scarto e sto cercando di visualizzare come un elenco di puntini.KonvaJS: HTML in un oggetto di testo

Ho provato a utilizzare una forma di testo e aggiungere HTML al testo per vedere se lo renderà, ma senza fortuna.

È possibile? Se é cosi, come? In caso contrario, quali altri modi KonvaJS deve visualizzare il testo di fantasia, come le liste, ext grassetto ...

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

uscita: Siamo spiacenti, I don `t hanno abbastanza reputazione di inviare le immagini, ma il testo è uscita :

<div>this is normal text 

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

voglio che sia qualcosa di simile:

questo è il testo normale

questo è BOLD

Qualsiasi aiuto apprezzato, grazie!

fonte

2015-09-11 Wayne Barnard

ho votato fino a incoraggiarvi per fare una buona domanda come questa, e per caricare le immagini :) –

In realtà è possibile caricare diversi icone da font-awesome, e fare belle applicazioni 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>

qui è un punto di riferimento per la soluzione https://stackoverflow.com/a/35581429/3530081

fonte

2016-02-23 15:34:36

Konva non può disegnare html su tela. È possibile utilizzare diverse opzioni di stile per testo come: fontFamily, fontSize, fontStyle, fontVariant (vedere docs).

Oppure è possibile convertire i dati html in immagine (o elemento canvas) con html2canvas, quindi tracciare il risultato tramite Konva.Image.

fonte

2015-09-11 15:27:30 lavrton

KonvaJS: HTML in un oggetto di testo

risposta

Problemi correlati