收藏
回答

关于qrcode二维码布局问题?


qrcode1 = new QRCode('canvas', {

                text: app.globalData.mobile,

                width:100,

                height:100,

                colorDark: "#1CA4FC",

                colorLight: "white",

                correctLevel: QRCode.CorrectLevel.H,

                });



<view class="container">

  <block    >

    <View class="QRbackground">

        <image   src="tttt.jpg"></image>

      </View>


      <view class="userinfo-avatar" >

          <open-data  type="userAvatarUrl"></open-data>

        </view>

        <canvas class='canvas' canvas-id='canvas' bindlongtap='save'></canvas>

  </block>

  

  

  .cavas{

  position: fixed;

  top:-400rpx;

  width :100rpx;

  height: 100rpx; 

}


.QRbackground image{ 

   position: fixed;

   top:300rpx;

   left:75rpx;

   right:75rpx;

   width:600rpx;

   height:600rpx ;

}我想实现这种布局效果,就是二维码要显示在一个白色图片的中央,具体代码已贴,为什么二维码的布局位置总是没效果

回答关注问题邀请回答
收藏

3 个回答

  • 楠木163
    楠木163
    2021-11-08

    canvas 的定位决定了位置,只要设好它的居中位置(margin: 0 10%)

    2021-11-08
    有用
    回复
  • 漠远科技@胡
    漠远科技@胡
    2021-10-15

    是的,我想把二维码放到那张白色底图的中央,放不进去

    2021-10-15
    有用
    回复
  • 矜持
    矜持
    2021-10-15

    canvas不是用了定位,是定位没有效果嘛

    2021-10-15
    有用
    回复 6
    • 漠远科技@胡
      漠远科技@胡
      2021-10-15
      <view class="container">
        <block wx:if="{{showQR}}" >
          <View class="QRbackground">
              <image src="rrrrr.png"></image>
          </View>
          <view class="userinfo-avatar" >
              <open-data type="userAvatarUrl"></open-data>
          </view>
          <canvas class='canvas' canvas-id='canvas' bindlongtap='save'></canvas>
        </block>


      .QRbackground image{
         margin-top:300rpx;
         margin-left:75rpx;
         margin-right:75rpx;
         width:600rpx;
         height:600rpx ;
      }

      .userinfo-avatar{
        margin-top:-1125rpx;
        margin-left:225rpx;
        margin-right:225rpx;
        width:150rpx;
        height: 150rpx;
        overflow: hidden;
        border-radius: 50%;

      }

      cavas{
        margin-top:150px;

        width :250px;
        height: 250px;
      }
      2021-10-15
      回复
    • 漠远科技@胡
      漠远科技@胡
      2021-10-15
      现在就是这个样子
      2021-10-15
      回复
    • 矜持
      矜持
      2021-10-15回复漠远科技@胡
      canvas写成了cavas错了 然后里面的单位应该是rpx 然后调整上跟左的距离
      2021-10-15
      回复
    • 漠远科技@胡
      漠远科技@胡
      2021-10-15
      qrcode1 = new QRCode('canvas', {
                      text: app.globalData.mobile,
                      width:150,
                      height:150,
                      colorDark: "#1CA4FC",
                      colorLight: "white",
                      correctLevel: QRCode.CorrectLevel.H,
                      });
      vanvas的宽高只能在js里面配置吗,在wxss里面不能配置吗
      2021-10-15
      回复
    • 矜持
      矜持
      2021-10-15回复漠远科技@胡
      可以呀 我说的就是css代码没说js
      2021-10-15
      回复
    查看更多(1)
登录 后发表内容