使用任何插件在 reveal.js 幻灯片中包括 konva.js 二维绘图

Question

我是 reveal.js 的新手，并尝试在我的幻灯片中添加 konva.js 二维绘图。我修改了任何插件提供的 sample codes，解释了如何在幻灯片中包含 d3.js 图表来做到这一点，但我的工作失败了，预期的 convas 元素中没有显示任何内容。我尝试对 chart.js 图表重复该工作，一切都很好。谁能帮帮我？

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

        <title>reveal.js</title>

        <link rel="stylesheet" href="dist/reset.css">
        <link rel="stylesheet" href="dist/reveal.css">
        <link rel="stylesheet" href="dist/theme/white.css">

        <!-- Theme used for syntax highlighted code -->
        <link rel="stylesheet" href="plugin/highlight/monokai.css">
    </head>
    <body>
        <div class="reveal">
            <div class="slides">
                <section>Slide 1
                <div class="konva stretch" id="konva">
<!--
{
"initialize": "function(container) {
      var width = container.innerWidth;
      var height = container.innerHeight;

      container.stage = new Konva.Stage({
        container: container.id,
        width: width,
        height: height,
      });
      

      var layer = new Konva.Layer();

      var rect2 = new Konva.Rect({
        x: 10,
        y: 10,
        width: 300,
        height: 20,
        shadowBlur: 10,
        cornerRadius: 10,
        fillLinearGradientStartPoint: { x: -50, y: -20 },
        fillLinearGradientEndPoint: { x: -50, y: 20 },
        fillLinearGradientColorStops: [0, 'red', 1, 'yellow'],
      });
      layer.add(rect2);
      container.stage.add(layer);
  
 }"
}
-->
                </id>
                </section>
                <section>Slide 2</section>
            </div>
        </div>

        <script src="dist/reveal.js"></script>
        <script src="plugin/notes/notes.js"></script>
        <script src="plugin/markdown/markdown.js"></script>
        <script src="plugin/highlight/highlight.js"></script>
        <script src="plugin/anything/plugin.js"></script>
        <script src="https://unpkg.com/konva@8.3.5/konva.min.js"></script>
        <script>
            // More info about initialization & config:
            // - https://revealjs.com/initialization/
            // - https://revealjs.com/config/
            Reveal.initialize({
                hash: true,

                // Learn about plugins: https://revealjs.com/plugins/
                plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ],
                anything: [
                 {
                    className: "konva",  
                    initialize: (function(container, options){ if (options && options.initialize) { options.initialize(container)} })
                 },
                 // ...
                ],
                plugins: [ RevealAnything ],
            });
        </script>
    </body>
</html>

编辑：我意识到我使用的 DOM 元素是 canvas 但 konva 只接受 div。现在在 chrome 的检查中，我可以看到容器受到了 Konvajs 的影响，但仍然没有显示任何内容。

Answer 1

问题是 div 容器的宽度和高度为零。改变

var width = container.innerWidth;
var height = container.innerHeight;

类似于：

var width = 400;
var height = 400;

解决了问题

使用任何插件在 reveal.js 幻灯片中包括 konva.js 二维绘图

including konva.js 2D drawings in reveal.js slides using anything plugin

konvajs

reveal.js