canvas在调用setTextAlign居中后，导出图片在ios上错位
发布于 7 年前 作者 duanchao 15366 次浏览 来自 问答

操作流程如下：

先save画布，再使用setTextAlign(‘center’)居中绘制文本后，restore，接着绘制其他文本图片，draw上画布，显示正常，然后调用canvasToTempFilePath导出图片，ios上的图片就会出现文字错位。

应该是一个ios上的bug，安卓上没这个问题。

错位图

正常图

现在有个临时解决方案，在使用完成setTextAlign(‘center’)后，再设置回setTextAlign(‘left’)，导出图片就会正常，希望修复~

10 回复

你好，这个demo代码能否提供一下

嗯嗯，辛苦，等你们的好消息~

有类似问题的demo我也有一个，怎么给你呢？

好坑。。2018.03.01还没修复

你好，感谢反馈，我们会在后续版本中进行修复，另外后续建议通过搜索相关关键字来后在提问，可以提高问题解答的效率。。

可以精简个demo给我，麻烦直接贴上来

mark

//index.js
//获取应用实例
const app = getApp()
 
Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    screenWH: [],
    isBottomShow:true
  },
  //事件处理函数
  bindViewTap: function() {
  },
  getScreenWH: function (callback) {
    try {
      var res = wx.getSystemInfoSync();
      var wh = this.data.screenWH;
      wh.push(res.windowWidth);
      wh.push(res.windowHeight);
      if (callback){
        callback();
      }
    } catch (e) {
    }
  },
  onLoad: function () {
    var that = this;
    that.getScreenWH(function(){
      that.draw();
    });
  },
 
  draw:function(){
    var that = this;
    var context = wx.createCanvasContext("canvas");//底层画布
    context.setFontSize(30);
    context.save();
    //居中前绘制
    context.setFillStyle('black');
    context.fillText('Hello', 30, 30);
    context.restore();
    context.save();
    //居中绘制
    context.setTextAlign('center');//居中
    context.setFillStyle('blue');

    context.fillText('Hello2', 30, 100);

   // context.setTextAlign('left');//恢复左对齐可以正常显示

    context.restore();
    context.save();
    //居中后绘制
    context.setFillStyle('red');
    context.fillText('Hello3', 30, 60);
    context.restore();
    context.draw(false, function(){
      wx.canvasToTempFilePath({
        canvasId: 'canvas',
        success: function (res) {
          setTimeout(function () {
            //隐藏底层画布
            that.setData({
              isBottomShow: false
            });
            var ctx = wx.createCanvasContext("canvas_above");//覆盖在上层的画布
            ctx.drawImage(res.tempFilePath, 0, 0, that.data.screenWH[0], that.data.screenWH[1]);
            ctx.draw();
          }, 5 * 1000);
        }
      });
    });
  }
})

<!--index.wxml-->
<view class="container">
  <view class="userinfo" style='display:none'>
    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto" style='display:none'>
    <text class="user-motto">{{motto}}</text>
  </view>
  <canvas class='canvas' canvas-id='canvas' style='{{isBottomShow ? "display:block;" : "display:none;"}}'>
  </canvas>
  <canvas class='canvas above' canvas-id='canvas_above'>
  </canvas>
</view>
/**index.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}
 
.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}
 
.userinfo-nickname {
  color: #aaa;
}
 
.usermotto {
  margin-top: 200px;
}
.container {
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}
 
page{
  width: 100%;
  height: 100%;
}
.canvas{
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  position: absolute;
  left: 0;
  top: 0;
}
.above{
  z-index: 10000;
}

全部的demo代码，麻烦看一下，辛苦~

已经重现了，我们定位一下，会尽快修复

这个问题是我在项目开发的时候碰到的，不是demo诶

回到顶部