KonvaJS: Bir Text nesnesinde HTML

Şu anda bir hurda rezervasyon uygulaması gibi oluşturmak için KonvaJS'yi arıyorum ve mermi listesi gibi göstermeye çalışıyorum.KonvaJS: Bir Text nesnesinde HTML

Bir Metin şekli kullanmaya çalışıyorum ve işlenip eklenmeyeceğini görmek için metne html ekliyorum, ancak şans yok.

Bu mümkün mü? Öyleyse nasıl? Çıktı metin Üzgünüm, görüntüleri yayınlamak için yeterli bir üne sahip, ancak don`t geçerli: Değilse, başka hangi yollarla 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 
    });

Çıktı ... listelerin, kalın ext gibi fantezi metni görüntülemek için var :

<div>this is normal text 

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

Ben bir şey gibi olmak istiyorum:

bunun normal metindir

Bu KALIN olduğunu

Herhangi bir yardım için teşekkür ederiz, teşekkürler!

kaynak

2015-09-11 Wayne Barnard

çözüm için bir referanstır Bu gibi iyi bir soru sormak ve görüntüleri yüklemek için :) –

Aslında font-awesome birçok simgeleri yükleyin ve güzel web uygulamaları yapabilirsiniz:

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>

burada

seni teşvik etmek kadar oy var https://stackoverflow.com/a/35581429/3530081

kaynak

2016-02-23 15:34:36

Konva, html'yi tuval içine çekemez. Yazı tipi için farklı stil seçenekleri kullanabilirsiniz: fontFamily, fontSize, fontStyle, fontVariant (bkz. docs).

Ya da html verilerini html2canvas ile görüntüye (veya kanvas elemanına) dönüştürebilir, daha sonra Konva.Image aracılığıyla sonucu çizebilirsiniz.

kaynak

2015-09-11 15:27:30 lavrton

KonvaJS: Bir Text nesnesinde HTML

cevap

İlgili konular