移动端（vue）横竖屏签名

最新推荐文章于 2024-07-03 15:39:32 发布

专写bug~~~

最新推荐文章于 2024-07-03 15:39:32 发布

阅读量4.7k

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue.js 签名横屏竖屏

本文链接：https://blog.csdn.net/qq_32538087/article/details/104895510

这篇博客探讨了在移动端使用Vue.js实现签名功能时遇到的横竖屏问题。作者分享了处理思路，包括设置横屏和竖屏的样式，确保canvas容器在屏幕旋转时能正确初始化，并通过监听横竖屏切换来更新canvas尺寸，从而适应不同屏幕方向。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一次接触这个移动端签名，知道用canvas但是canvas不精通。所以canvas的代码是找的别人的，本来想附上之前的链接的但是找不到了，抱歉。

你能点进来说明你目前也被这个问题困扰着，我以我个人的理解说一下思路。

大家都会怎么去签名，但是问题就在横屏和竖屏的问题上。

1、先写好横屏和视屏的样式（横屏的时候正常布局就行，不用竖着布局，只是页面的宽高变化了，样式上不会有太大的影响的），2、用canvas的时候页面加载完成后回初始化canvas容器，当页面点击进去的时候是竖屏，横屏的时候初始化的canvas宽高会不符合横屏，这时候我们要判断，横竖屏转换的时候重新加载页面，这样初始化出来的canvas容器是符合我们当前屏幕的，也不用去考虑用户手机有没有锁定竖屏，或者是没有锁定竖屏（横屏）。

3、监听手机有没有横竖屏切换

mounted(){
    this.lineCanvas({
      el: this.$refs.canvas,//绘制canvas的父级div
      clearEl:  this.$refs.clearCanvas,//清除按钮
      saveEl:  this.$refs.saveCanvas,//保存按钮
    });
    window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", this.resize, false);
  },

resize(){
      location.reload()
},

lineCanvas(obj) {
      this.linewidth = 2;
      this.color = "#000000";
      this.background = "#ffffff";
      for (var i in obj) {
        this[i] = obj[i];
      }
      this.canvas