React Konva 中的舞台宽度和高度是否有任何限制？

Question

我正在使用 React Konva。使用它的stage 元素宽度为90,000，高度为60,000。它给空白页带来了悲伤的微笑。

谁能告诉我舞台宽度和高度的限制是多少？

Answer 1

Konvajs 库是 HTML5 canvas element 的“包装器”。这意味着 Konvajs 受到每个浏览器内置画布的限制。

因此，您的问题应该是“HTML5 画布大小的限制是什么？”，一直是answered here - 浏览器应用不同的限制。

你应该怎么做才能克服这些限制？ Konvajs 文档here 中有一篇文章提供了处理大画布的选项。您应该注意本文中提出的观点，即处理大画布很慢。

[编辑] 正如 OP 所指出的，通过指向当前浏览器画布大小限制的链接，并在 Chrome 85.0.4183.102（PC 64 位）上进行测试，我应该能够拥有一个大小为 65,535 x 65,535 的画布。所以我构建了这个 sn-p 来测试。它从一个角到另一个角绘制了一个带有大十字的舞台，其尺寸显示在下拉列表中。我达到 12k x 12k 然后在下一个 20k 尺寸时，我得到了悲伤的脸，没有画布。此外，我在 stage-create 周围添加了一个 try-catch，并期望会引发某种错误。但是，没有出现错误。

我的结论是，有些东西“妨碍”了代码充分利用画布潜力的能力。我查看了 Github Konvajs 存储库中的 stage、layer 和 util 类，在创建或调整 stage 大小时看不到任何明显限制大小的东西。

虽然目前无法利用规定的可用画布大小的原因尚无定论，但要寻求的解决方案是使用视口。有关该概念的讨论，请参阅 this question。

let     
    sizeW = 20000,
    sizeH = 20000,
    stage = null;

function drawStage(size){

  try{

    // Set up a stage
    stage = new Konva.Stage({
          container: 'container',
          width: size,
          height: size,
          draggable: true
        }),

      // add a layer to draw on
      layer = new Konva.Layer(),

      line1 = new Konva.Line({points: [0, 0, size, size], stroke: 'cyan', strokeWidth: 10}),
      line2 = new Konva.Line({points: [0, size,  size, 0], stroke: 'cyan', strokeWidth: 10});

      layer.add(line1, line2);
      stage.add(layer);
      stage.draw();
  }
  catch(err){
    alert('error ' + err.message)
  }
}

$('#size').on('change', function(){
  let  size = parseInt($('#size').val(), 10) * 1000;
  stage.destroyChildren()
  stage.destroy();
  drawStage(size);
})

// Initial draw:
let  size = parseInt($('#size').val(), 10) * 1000;
drawStage(size);

body {
  margin: 10;
  padding: 10;
  overflow: hidden;
  background-color: #f0f0f0;
}
#container {
border: 1px solid silver;
width: 500px;
height: 300px;
overflow: scroll;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/konva@^3/konva.min.js"></script>
<p>Use the dropdown to have stage redrawn at increasing sizes. On PC/Chrome I get to 12k then get the sad-face at 20k. </p>
<p>
  <select id='size'>
    <option value='4'  selected='selected'>4k x 4k</option>
    <option value='8'>8k x 8k</option>
    <option value='12' >12k x 12k</option>
    <option value='20' >20k x 20k</option>
    <option value='30'>30k x 30k</option>    
  </select>
</p>
<div id="container"></div>