canvas渲染bug
发布于 6 年前 作者 dfeng 2296 次浏览 来自 问答

1.问题1

    canvas生成的二维码显示问题,第一章是安卓手机与模拟器效果,由于一维码跟二维码都是用canvas生成的,并且fixed到页面相应位置的。但是苹果手机显示就像第二张图那样,安卓没问题。模拟器与安卓效果如图一,苹果显示如2;

并且一维码二维码都有一个点击放大的功能。也是真机与安卓手机没毛病。苹果上面不行

2.问题2

    如下所示,苹果手机上面背景可滑动且滑动时canvas组件位置发生偏移。安卓与开发工具显示正常。


4 回复

iphone 6sp /7s  微信6.6.1,这个问题还没有解决

你好,问题未复现。请提供一下出现问题的机型和微信版本,以及能复现问题的简单代码示例。

<view class=“qrcode-modal flex-center” hidden="{{hideModal}}">

<view class=“qrcode-main-true” catchtap=“hideModal”></view>

<view class=“qrcode-modal-bg”>

<view class=“page”>

<view class=“panel”>

<view class=“barcode” catchtap=“showBarcodeModal”>

<view class=“barnum”>1223312</view>

<canvas canvas-id=“barcode” />

</view>

<view class=“qrcode” catchtap=“showQrcodeModal”>

<canvas canvas-id=“qrcode” />

</view>

</view>

</view>

</view>

</view>

<view class=“barcode-modal flex-center” hidden="{{barcodeModal}}" catchtap=“hideBarcodeModal”>

<view class=“barnum”>12312312321</view>

<view class=“barcode-box”>

<canvas canvas-id=“barcode-canvas” />

</view>

</view>

<view class=“qrcode-modal-canvas flex-center” hidden="{{qrcodeModal}}" catchtap=“hideQrcodeModal”>

<canvas canvas-id=“qrcode-canvas” />

</view>

/* 卡弹窗 */

.qrcode-modal, .qrcode-main-true, .barcode-modal, .qrcode-modal-canvas {

left: 0;

top: 0;

bottom: 0;

right: 0;

position: fixed;

z-index: 100;

background-color: rgba(0, 0, 0, 0.5);

}

.qrcode-modal {

z-index: 99;

}

.barcode-modal, .qrcode-modal-canvas {

background-color: #fff;

z-index: 120;

}

.barcode-modal {

flex-direction: column;

justify-content: center;

}

.qrcode-modal-bg {

background-color: #fff;

width: 680rpx;

box-sizing: border-box;

/* padding: 20rpx 30rpx; */

padding: 0 10rpx;

margin: 0 auto;

height: 750rpx;

overflow-y: hidden;

border-radius: 16rpx;

z-index: 100;

}

.page {

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

}

.container {

padding-bottom: 10rpx;

}

.panel {

display: flex;

flex-direction: column;

justify-content: space-between;

align-items: stretch;

box-sizing: border-box;

width: 100%;

border-radius: 10rpx;

background-color: #fff;

}

.barcode {

display: flex;

height: 320rpx;

flex-direction: column;

justify-content: center;

align-items: center;

}

.barnum {

width: 100%;

height: 100rpx;

line-height: 100rpx;

font-size: 38rpx;

font-weight: bold;

text-align: center;

letter-spacing: 10rpx;

white-space: nowrap;

}

.barcode > canvas {

width: 660rpx;

height: 200rpx;

}

.qrcode {

height: 420rpx;

display: flex;

flex-direction: column;

justify-content: flex-end;

align-items: center;

}

.qrcode > canvas {

width: 420rpx;

height: 420rpx;

}

.barcode-modal canvas {

height: 300rpx;

width: 750rpx;

}

.barcode-modal .barcode-box {

height: 300rpx;

width: 690rpx;

}

.barcode-modal>.barnum {

transform: scale(2);

}

.qrcode-modal-canvas>canvas {

width: 100%;

height: 750rpx;

}

回到顶部