KonvaJS: HTML trong đối tượng Văn bản

Tôi hiện đang xem xét KonvaJS để tạo ứng dụng đặt vé phế liệu và tôi đang cố hiển thị như một danh sách dấu đầu dòng.KonvaJS: HTML trong đối tượng Văn bản

Tôi đang cố gắng sử dụng hình dạng Văn bản và thêm html vào văn bản để xem nó có hiển thị hay không, nhưng không may mắn.

Điều này có thể thực hiện được không? Nếu vậy, làm thế nào? Nếu không, những cách khác không KonvaJS phải hiển thị văn bản ưa thích, như danh sách, ext đậm ...

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

Output: Xin lỗi, tôi don `t có đủ uy tín để gửi hình ảnh, nhưng các văn bản đầu ra là :

<div>this is normal text 

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

tôi muốn nó được một cái gì đó như:

đây là văn bản bình thường

Đây là BOLD

Bất kỳ trợ giúp nào được đánh giá cao, cảm ơn!

Nguồn

2015-09-11 Wayne Barnard

Tôi đã bỏ phiếu lên để khuyến khích bạn để đặt câu hỏi hay như câu hỏi này và tải lên hình ảnh :) –

Trên thực tế bạn có thể tải nhiều biểu tượng từ font-awesome, và làm cho các ứng dụng web đẹp:

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>

đây là một tài liệu tham khảo cho các giải pháp https://stackoverflow.com/a/35581429/3530081

Nguồn

2016-02-23 15:34:36

Konva không thể vẽ html thành canvas. Bạn có thể sử dụng các tùy chọn kiểu khác nhau cho văn bản như: fontFamily, fontSize, fontStyle, fontVariant (xem docs).

Hoặc bạn có thể chuyển đổi dữ liệu html thành hình ảnh (hoặc phần tử canvas) với html2canvas, sau đó vẽ kết quả qua Konva.Image.

Nguồn

2015-09-11 15:27:30 lavrton

KonvaJS: HTML trong đối tượng Văn bản

Trả lời

Các vấn đề liên quan