Sveltejs全宽画布 [英] Responsive full width canvas in sveltejs

问题描述

我是Svelte的新手，我正在尝试使用Svelte在全屏幕上渲染画布。听起来很容易做，但我不能让它正常工作。我将width和height变量绑定到父级的clientWidth/clientHeight，并使用这些变量设置画布的尺寸。现在的问题是，当调用onMount时，width和height变量被设置，但它们还没有应用于Canvas元素。这意味着当画布第一次渲染时，它仍然具有初始尺寸，而不是父级的尺寸。只有当我第二次渲染它时，它才有合适的尺寸。如何使画布在第一次渲染时具有正确的尺寸，或者当画布具有正确的尺寸时再次渲染？

Here您可以找到工作中的版本。

<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();
});

await tick()所做的是有效地暂停执行，直到将所有当前更改应用到DOM

tick in the docs

这篇关于Sveltejs全宽画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！