KonvaJS: HTML в текстовом объекте

В настоящее время я ищу KonvaJS для создания приложения для бронирования лома, и я пытаюсь отобразить его как список пули.KonvaJS: HTML в текстовом объекте

Я пытаюсь использовать форму текста и добавлять html к тексту, чтобы увидеть, будет ли он отображать его, но не повезло.

Возможно ли это? Если да, то как? Если нет, то какие другие способов это 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 
    });

Выход: К сожалению, У меня нет достаточно репутации размещать изображения, но вывод текст :

<div>this is normal text 

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

Я хочу, чтобы это было что-то вроде:

это обычный текст

Это BOLD

Любая помощь приветствуется, спасибо!

источник

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

Konva не может нарисовать html в холсте. Вы можете использовать различные параметры стиля для текста, такие как: fontFamily, fontSize, fontStyle, fontVariant (см. docs).

Или вы можете преобразовать html-данные в изображение (или элемент холста) с помощью html2canvas, затем нарисуйте результат с помощью Konva.Image.

источник

2015-09-11 15:27:30 lavrton

ответ

Смежные вопросы