如何解决React Konva中的舞台宽度和高度是否有限制?
我正在与React Konva合作。使用stage
元素宽度为90,000
,高度为60,000
。它给空白页带来了悲伤的笑容。
谁能告诉我舞台宽度和高度的限制是什么?
解决方法
Konvajs库是HTML5 canvas element的“包装器”。这意味着Konvajs受到每个浏览器内置的画布的限制。
因此,您的问题应该是“ HTML5画布大小的限制是什么?”,即answered here-浏览器应用了不同的限制。
您应该怎么做才能克服这些限制? Konvajs文档here中有一篇文章提供了处理大型画布的选项。您应该注意本文指出的一点,即处理大画布很慢。
[EDIT]正如OP所指出的那样,通过链接到当前浏览器的画布大小限制,并在Chrome 85.0.4183.102(PC 64位)上进行测试,我应该能够将画布大小调整为65,535 x 65,535。因此,我构建了此代码段进行测试。它绘制了一个舞台,角与角之间有一个很大的十字,其尺寸显示在下拉列表中。我得到12k x 12k,然后在下一个20k的大小时,我得到了悲伤的表情,没有画布。另外,我在stage-create周围添加了一个try-catch,并期望引发某种错误。但是,不会出现错误。
我得出的结论是,代码的某些功能正在“妨碍”其充分利用画布的潜力。我查看了Github Konvajs存储库中的stage,layer和util类,没有发现任何明显限制该阶段创建或调整大小的东西。
尽管目前无法确定可用的可用画布大小的原因尚无定论,但要寻求的解决方案是采用视口。有关该概念的讨论,请参见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,size,size],stroke: 'cyan',strokeWidth: 10}),line2 = new Konva.Line({points: [0,0],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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。