hanzi-writer生成的svg外有一层div，修改div宽高影响的是画布大小，字体在不同视口下完全不相同。我想要让字体跟画布同比例大小该怎么实现？

1、hanzi-writer生成的svg外有一层div，修改div宽高影响的是画布大小，字体在不同视口下完全不相同。我想要让字体跟画布同比例大小该怎么实现？
2、LocomotiveScroll怎么在vue3全网页（最大的父容器）中进行顺滑滚动？不知道加在哪里。

问题一代码

<template>
  
  <div class="header">
    
    <div v-for="item of 200" :key="item" class="snowflake">div>
    <div class="title">
      
      <div class="title__parent">
        <Transition
          name="fade"
          enter-active-class="animate__animated animate__slideInUp"
        >
          <p v-if="show" class="title__top">驶出孤岛p>
        Transition>
      div>
      <div class="title__row">
        <div class="title__parent">
          <Transition
            name="fade"
            enter-active-class="animate__animated animate__slideInUp animate__fast delay"
          >
            <p v-if="show" class="title__row__left">的p>
          Transition>
        div>
        
        <div class="title__row__right">
          <div id="character-target-div1">div>
          <div id="character-target-div2">div>
          <div id="character-target-div3">div>
        div>
      div>
    div>
  div>
template>

import { onMounted, ref } from "vue";
import HanziWriter from "hanzi-writer";
export default {
  name: "Header",
  setup() {
    const show = ref(false);
    const chainAnimations = () => {
      //创建笔法“淘”字实例
      var writeOne = HanziWriter.create("character-target-div1", "淘", {
        padding: 5, //内边距
        showCharacter: false, //不显示汉字
        showOutline: false, //开启动画时不显示汉字
        strokeColor: "#000000", //字体颜色
        strokeAnimationSpeed: 5, //动画速度
        delayBetweenStrokes: 10, //动画每笔间隔时间，默认1000
      });

      //创建笔法“金”字实例
      var writeTwo = HanziWriter.create("character-target-div2", "金", {
        padding: 5, //内边距
        showCharacter: false, //不显示汉字
        showOutline: false, //开启动画时不显示汉字
        strokeColor: "#000000", //字体颜色
        strokeAnimationSpeed: 5, //动画速度
        delayBetweenStrokes: 10, //动画每笔间隔时间，默认1000
        drawingWidth: 10,
      });

      //创建笔法“者”字实例
      var writeThree = HanziWriter.create("character-target-div3", "者", {
        padding: 5, //内边距
        showCharacter: false, //不显示汉字
        showOutline: false, //开启动画时不显示汉字
        strokeColor: "#000000", //字体颜色
        strokeAnimationSpeed: 5, //动画速度
        delayBetweenStrokes: 10, //动画每笔间隔时间，默认1000
      });

      setTimeout(function () {
        writeOne.animateCharacter({
          onComplete: function () {
            setTimeout(function () {
              writeTwo.animateCharacter({
                onComplete: function () {
                  setTimeout(function () {
                    writeThree.animateCharacter();
                  }, 0);
                },
              });
            }, 0);
          },
        });
      }, 980);
    };
    //挂载执行
    onMounted(() => {
      show.value = true;
      chainAnimations();
    });

    return { show };
  },
};

* {
  margin: 0;
  box-sizing: border-box;
}

.header {
  width: 100%;
  height: 150vh;
  display: flex;
  justify-content: center;
  background: linear-gradient(
    to top,
    #fffbf7 40%,
    #fff1da 70%,
    rgb(252, 221, 180) 99%
  ) !important;

  .title {
    width: 90%;
    height: 3.56rem;
    margin: 2.8rem 0 0 0;
    letter-spacing: 0.5rem;
    &__parent {
      display: block;
      overflow: hidden;
    }
    &__top {
      display: block;
      font-size: 1.496rem;
      font-family: 宋体;
      font-weight: bold;
      margin-left: 1rem;
    }
    &__row {
      display: flex;
      justify-content: flex-end;
      margin-right: 1.2rem;
      &__left {
        color: #000000;
        font-size: 1.496rem;
        font-family: 宋体;
        margin-right: 0.2rem;
      }
      &__right {
        display: flex;
        color: #000;
        font-family: "Lucida Calligraphy", cursive, serif, sans-serif;
      }
    }
  }
}

#character-target-div1,
#character-target-div2,
#character-target-div3 {
  width: 1.5rem;
  height: 1.5rem;

}

.snowflake {
  --size: 1vw;
  width: var(--size);
  height: var(--size);
  background: url(../../images/falling.gif) no-repeat; //金色叶子
  background-size: 100% 100%;
  position: fixed;
  top: -10vh; //出事高度在屏幕外 效果更真实
  z-index: 1; //背景图层不遮挡上面元素
}

@keyframes fall {
  100% {
    transform: translate3d(var(--end), 100vh, 0);
  }
}

@for $i from 0 through 200 {
  .snowflake:nth-child(#{$i}) {
    //每个雪花的大小
    --size: #{random(6) * 0.1}vw;
    //雪花移动目标点
    --end: #{random(20) - 40}vw;
    //雪花初始位置
    left: #{random(150)}vw;
    //雪花从顶到底移动的动画 动画时间可以调整雪花速度
    animation: fall #{5 + random(8)}s linear infinite;
    animation-delay: -#{random(10)}s;
  }
}

.animate__slideInUp {
  animation-duration: 0.9s;
}

.delay {
  animation-duration: 0.98s;
  animation-delay: 350ms;
}

问题一图

‘

问题2代码

import LocomotiveScroll from 'locomotive-scroll';

const lscroll = new LocomotiveScroll({
    el: document.querySelector('#js-scroll'),
    smooth: true,
    // reloadOnContextChange: true,
    lerp: 0.06,
    // smoothMobile: true
});

export { lscroll };

该回答引用ChatGPT
问题一：让字体跟画布同比例大小
要让字体跟画布同比例大小，可以使用CSS的`vw`和`vh`单位，它们是相对于视口宽度和高度的单位，可以根据视口大小自动调整元素大小。具体实现方法是将字体大小设置为相对于画布宽度的百分比，例如：

css
.title__top {
  font-size: 5vw; /* 相对于画布宽度的5% */
}

这样就可以保证在不同视口下字体大小与画布大小同比例。
问题二：在vue3全网页中进行顺滑滚动
要在vue3全网页中使用LocomotiveScroll进行顺滑滚动，可以在`main.js`中创建一个全局的LocomotiveScroll实例，并将其挂载到Vue实例上，例如：

js
import LocomotiveScroll from 'locomotive-scroll';
const lscroll = new LocomotiveScroll({
  el: document.querySelector('#js-scroll'),
  smooth: true,
  lerp: 0.06,
});
createApp(App)
  .use(router)
  .provide('lscroll', lscroll) // 将lscroll实例挂载到Vue实例上

该回答通过自己思路及引用到GPTᴼᴾᴱᴺᴬᴵ搜索,得到内容具体如下。
一、问题1解答如下：
问题一：让hanzi-writer生成的字体大小与画布比例相同。
hanzi-writer生成的字体大小是通过CSS来控制的，可以通过修改CSS样式来实现大小自适应。
首先，需要获取hanzi-writer生成的画布的宽度和高度，然后根据宽高比例来计算出字体应该的大小，最后将计算出的字体大小设置为对应的CSS属性即可。具体代码如下：

// 获取hanzi-writer画布和字体元素
const canvas = document.querySelector('.hanzi-writer canvas');
const character = document.querySelector('.hanzi-writer .character');

// 计算画布宽高比
const canvasAspectRatio = canvas.width / canvas.height;

// 计算字体大小
const fontSize = canvas.height * 0.8;

// 设置字体大小
character.style.fontSize = fontSize + 'px';

// 设置字体行高，使得字体居中显示
character.style.lineHeight = canvas.height + 'px';

// 设置字体宽度，使得宽度与高度按比例缩放
character.style.width = canvasAspectRatio * fontSize + 'px';

二、问题2解答如下：
问题二：在vue3全网页中使用LocomotiveScroll进行顺滑滚动。
要在整个网页中使用LocomotiveScroll，需要将LocomotiveScroll的初始化代码放在最外层的容器中，并设置容器的高度为100%。以下是示例代码：

<template>
  <div class="app">
    <!-- 最外层容器 -->
    <div ref="scrollContainer" class="scroll-container">
      <!-- 网页内容 -->
      <div class="content">
        <!-- ... -->
      </div>
    </div>
  </div>
</template>

<script>
import LocomotiveScroll from 'locomotive-scroll';

export default {
  mounted() {
    // 初始化LocomotiveScroll
    this.scroll = new LocomotiveScroll({
      el: this.$refs.scrollContainer,
      smooth: true
    });
  },
  destroyed() {
    // 销毁LocomotiveScroll
    this.scroll.destroy();
  }
};
</script>

<style>
html,
body {
  height: 100%;
  margin: 0;
}

.app {
  height: 100%;
}

.scroll-container {
  height: 100%;
}

.content {
  /* 网页内容样式 */
}
</style>

在上面的示例代码中，

针对第一个问题，要让字体跟画布同比例大小，需要先获取到hanzi-writer生成的svg元素，然后设置其宽高属性为100%，这样svg元素就会根据其父元素（也就是hanzi-writer生成的div元素）的大小自适应缩放。

具体实现可以参考以下代码：

const svg = document.querySelector("#character-target-div1 svg");
svg.setAttribute("width", "100%");
svg.setAttribute("height", "100%");

其中，'#character-target-div1

需要注意的是，hanzi-writer生成的svg元素的宽高比例是固定的，如果父元素的宽高比例与其不同，会导致字体的变形。因此，可以在父元素上设置'

.character-target-div {
  position: relative;
  padding-bottom: calc(100% / 1.4);
  /* 宽高比例为1:1.4 */
}
.character-target-div svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

以上代码中，'.character-target-div

针对第二个问题，LocomotiveScroll是一款基于CSS3和原生JavaScript的平滑滚动插件。在Vue 3中使用LocomotiveScroll，可以将其绑定到Vue实例的根元素上，实现全网页的顺滑滚动。具体实现可以参考以下代码：

<template>
  <div id="app">
    <!-- 页面内容 -->
  </div>
</template>

<script>
import LocomotiveScroll from "locomotive-scroll";

export default {
  mounted() {
    const scroll = new LocomotiveScroll({
      el: document.querySelector("#app"), // 绑定到根元素上
      smooth: true, // 启用平滑滚动
      // 其他配置项
    });
  },
};
</script>

以上代码中，'document.querySelector（“#app”）