问题说明:
在开发工具测试。画图是可以显示出来的。
在手机测试。点击test按钮。没有报错和异常。但是框没显示。个人猜测有可能是在相机下一层。不知该如何解决
需求说明:
自定义打开相机
按钮进行定时拍照操作，拿到图片会进行识别返回人脸的位置信息，通过canvas画框显示在相机中。为了做人脸实时跟踪
代码：
1.页面代码
<view class="page-body"> <view class="page-body-wrapper"> <camera device-position="front" flash="off" binderror="error" style="width:100%;height:{{windowWidth}}px;"></camera> <canvas style="width: 100%;height:{{windowWidth}}px;position:absolute;" canvas-id="firstCanvas"></canvas> <button type="primary" bindtap="test" style='background-color:#31859c;'>test</button> </view> </view> |
2.js代码
// pages/test/test.js Page({ /** * 页面的初始数据 */ data: { windowWidth: 0, }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var that = this wx.showLoading({ title: '努力加载中', mask: true }) //屏幕宽度 var sysInfo = wx.getSystemInfoSync() console.info(sysInfo.windowWidth); that.setData({ windowWidth: sysInfo.windowWidth, }) that.ctx = wx.createCameraContext() wx.hideLoading() }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () {
}, test(){ var ctx = wx.createCanvasContext('firstCanvas'); ctx.setStrokeStyle('#31859c') ctx.setLineWidth(5) ctx.strokeRect(0,0,200,100) ctx.draw(); }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } }) |
3.css代码
.preview-tips { margin: 50rpx 0 30rpx; }.video { margin: 20rpx auto; width: 100%; height: 300px;}page { background-color: #F8F8F8; height: 100%; font-size: 32rpx; line-height: 1.6;}.page-body { padding: 20rpx 0;}.page-body-wrapper { display: flex; flex-direction: column; align-items: center; width: 100%;}.btn-area { margin-top: 40rpx; box-sizing: border-box; width: 100%; padding: 0 30rpx;} |
z-index
层级问题