我对 svelte 很陌生,我正在尝试使用 svelte 在全屏上渲染画布。听起来很容易做到,但我无法让它正常工作。我正在绑定一个width
and height
变量为clientWidth
/clientHeight
父级并使用这些变量来设置画布的尺寸。现在的问题是,什么时候onMount
被称为,width
and height
变量已设置,但尚未应用于画布元素。这意味着当画布第一次渲染时,它仍然具有初始尺寸,而不是父级的尺寸。只有当我第二次渲染它时,它才具有正确的尺寸。如何使画布在第一次渲染时具有正确的尺寸或在画布具有正确的尺寸时再次渲染画布?
Here https://svelte.dev/repl/fd3a6f54b1f9436791444b7765be0cd7?version=3.24.0你可以找到一个“工作”版本。
<script>
import { onMount } from "svelte";
let canvas;
let ctx;
let width = 1007;
let height = 1140;
const draw = () => {
ctx.clearRect(0, 0, width, height);
ctx.beginPath();
ctx.moveTo(width/2 - 50, height/2);
ctx.arc(width/2, height/2, 50, 0, 2 * Math.PI);
ctx.fill();
}
onMount(() => {
ctx = canvas.getContext("2d");
draw();
setTimeout(draw, 5000);
});
</script>
<style>
.container {
width: 100%;
height: 100%;
}
</style>
<div
class="container"
bind:clientWidth={width}
bind:clientHeight={height}>
<canvas bind:this={canvas} {width} {height} />
</div>
您可以通过等待下一个“嘀嗒”来解决此问题
import { onMount, tick } from 'svelte';
onMount(async () => {
ctx = canvas.getContext("2d");
canvas.width = width;
canvas.height = height;
await tick()
draw();
});
What await tick()
所做的就是有效地暂停执行,直到所有当前更改都应用到 dom
在文档中打勾 https://svelte.dev/docs#tick
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)