<!DOCTYPE html> <html> <head> <script src="https://unpkg.com/[email protected]/konva.min.js"></script> <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script> <link rel="stylesheet" href="https://cdn.quilljs.com/1.3.6/quill.snow.css" />
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script> <meta charset="utf-8" /> <title>Konva Rich text on Canvas Demo</title> <style> body { margin: 0; padding: 0; overflow: hidden; background-color: #f0f0f0; }
#editor-container { height: 80px; } </style> </head>
<body> <div id="editor-container"> That is <u>some</u> <span style="color: red"> styled text</span> on <strong>canvas</strong>! <h2>What do you think about it?</h2> </div> Rendered stage: <div id="container"></div> <script> var quill = new Quill('#editor-container', { modules: { toolbar: [ [{ header: [1, 2, false] }], ['bold', 'italic', 'underline'], ['image', 'code-block'] ] }, placeholder: 'Compose an epic...', theme: 'snow' });
var width = window.innerWidth; var height = window.innerHeight;
var stage = new Konva.Stage({ container: 'container', width: width, height: height });
const layer = new Konva.Layer(); stage.add(layer);
const shape = new Konva.Image({ x: 10, y: 10, draggable: true, stroke: 'red', scaleX: 1 / window.devicePixelRatio, scaleY: 1 / window.devicePixelRatio }); layer.add(shape);
layer.draw();
function renderText() { html2canvas(document.querySelector('.ql-editor'), { backgroundColor: 'rgba(0,0,0,0)' }).then(canvas => { shape.image(canvas); layer.batchDraw(); }); }
var timeout = null; function requestTextUpdate() { if (timeout) { return; } timeout = setTimeout(function() { timeout = null; renderText(); }, 500); }
quill.on('text-change', requestTextUpdate); renderText(); </script> </body> </html>
|