老司机带带我
老司机带带我
  • 发布:2022-06-28 11:29
  • 更新:2022-06-28 11:29
  • 阅读:78

【报Bug】canvas 使用 cover-view 嵌套 cover-view 时 边框属性异常

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win11

HBuilderX类型: 正式

HBuilderX版本号: 3.4.15

手机系统: Android

手机系统版本号: Android 12

手机厂商: 小米

手机机型: 小米8

页面类型: vue

vue版本: vue2

nvue编译模式: fast

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
    <view>  
        <canvas canvas-id="master" id="canvas" :style="style">  
            <cover-view class="cover-view">  
                <!-- 角线 -->  
                <cover-view class="touch-area left top"></cover-view>  
                <cover-view class="touch-area right top"></cover-view>  
                <cover-view class="touch-area left bottom"></cover-view>  
                <cover-view class="touch-area right bottom"></cover-view>  

                <!-- 辅助线 -->  
                <cover-view class="pa line-vertical-one"></cover-view>  
                <cover-view class="pa line-vertical-two"></cover-view>  
                <cover-view class="pa line-horizontal-one"></cover-view>  
                <cover-view class="pa line-horizontal-two"></cover-view>  
            </cover-view>  
        </canvas>  
    </view>
#canvas{  
        border: 1rpx solid white;  
    }  
    .pa{  
        position: absolute;  
        background-color: white;  
    }  
    .cover-view{  
        width: 100%;  
        height: 100%;  
        position: relative;  
        padding: 0;  
        border: 2px solid yellow;  
        box-sizing: border-box;  
        .touch-area{  
            width: 50rpx;  
            height: 50rpx;  
            position: absolute;  
            background-color: yellow;  
            box-sizing: border-box;  
        }  
        .left{  
            border-left: 20px solid red;  
            left: 0;  
        }  
        .top{  
            border-top: 20px solid red;  
            top: 0;  
        }  
        .right{  
            border-right: 20px solid red;  
            right: 0;  
        }  
        .bottom{  
            border-bottom: 20px solid red;  
            bottom: 0;  
        }  
        .line-vertical-one{  
            width: 1px;  
            left: 33.3%;  
            height: 100%;  
        }  
        .line-vertical-two{  
            width: 1px;  
            left: 66.7%;  
            height: 100%;  
        }  
        .line-horizontal-one{  
            height: 1px;  
            top: 33.3%;  
            width: 100%;  
        }  
        .line-horizontal-two{  
            height: 1px;  
            top: 66.7%;  
            width: 100%;  
        }  
    }

操作步骤:

具体看vue页面

预期结果:

手机端显示效果跟H5端一样

实际结果:

边框颜色异常

bug描述:

做一个图片剪裁的功能 图片剪裁辅助框 在canvas上 使用cover-view组件 嵌套cover-view绘制辅助线,H5 效果正常 看图1 但是手机上没有边框 对比手机图1 (图片插入不了)


.touch-area{  
            width: 50rpx;  
            height: 50rpx;  
            position: absolute;  
            background-color: yellow;  
            box-sizing: border-box;  
        }  
        .left{  
            border-left: 20px solid red;  
            left: 0;  
        }  
        .top{  
            border-top: 20px solid red;  
            top: 0;  
        }  
        .right{  
            border-right: 20px solid red;  
            right: 0;  
        }  
        .bottom{  
            border-bottom: 20px solid red;  
            bottom: 0;  
        }
```  对边框醒目处理之后 可以看到 没有边框 但是有黑色的区域间隔 可能是边框没有上色  使用!important 也无效  
2022-06-28 11:29 负责人:无 分享
已邀请:

要回复问题请先登录注册