KonvaJS: HTML ऑब्जेक्ट में HTML

मैं वर्तमान में एक स्क्रैप बुकिंग ऐप बनाने के लिए KonvaJS में देख रहा हूं, और मैं बुलेट सूची की तरह प्रदर्शित करने की कोशिश कर रहा हूं।KonvaJS: HTML ऑब्जेक्ट में HTML

मैं टेक्स्ट आकार का उपयोग करने की कोशिश कर रहा हूं और पाठ में एचटीएमएल जोड़ता हूं यह देखने के लिए कि क्या यह इसे प्रस्तुत करेगा, लेकिन कोई भाग्य नहीं है।

क्या यह भी संभव है? यदि हां, तो कैसे? यदि नहीं, तो क्या अन्य तरीकों KonvaJS ... फैंसी पाठ, सूचियों, बोल्ड 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 
    });

आउटपुट: आउटपुट टेक्स्ट है क्षमा करें, मैं डॉन 'टी छवियों पोस्ट करने के लिए पर्याप्त प्रतिष्ठा है, लेकिन :

<div>this is normal text 

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

मैं इसे होने के लिए कुछ की तरह हैं:

यह सामान्य पाठ है

यह बोल्ड है

किसी भी मदद की सराहना की, धन्यवाद!

स्रोत

2015-09-11 Wayne Barnard

मैं तुम्हें प्रोत्साहित करने के लिए को वोट किया है एक संदर्भ है इस तरह के अच्छे सवाल पूछने के लिए, और छवियों को अपलोड करने के लिए :) –

वास्तव में आप font-awesome से कई प्रतीक लोड कर सकते हैं, और सुंदर वेब क्षुधा बनाने:

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>

यहाँ

समाधान https://stackoverflow.com/a/35581429/3530081

स्रोत

2016-02-23 15:34:36

कोवा एचटीएमएल को कैनवास में नहीं खींच सकता है। आप टेक्स्ट के लिए अलग-अलग शैली विकल्पों का उपयोग कर सकते हैं जैसे: fontFamily, fontSize, fontStyle, fontVariant (देखें docs)।

या आप html2canvas के साथ HTML डेटा को छवि (या कैनवास तत्व) में परिवर्तित कर सकते हैं, फिर Konva.Image के माध्यम से परिणाम खींचें।

स्रोत

2015-09-11 15:27:30 lavrton

KonvaJS: HTML ऑब्जेक्ट में HTML

उत्तर

संबंधित मुद्दे