公告列表
公告列表
收藏
回答

canvas在调用setTextAlign居中后，导出图片在ios上错位

API/组件名称 终端类型 微信版本 基础库版本
setTextAlign 客户端 6.6.1 1.6.6

操作流程如下：

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

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

错位图

正常图


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

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

10 个回答

  • 黄思程
    黄思程
    2018-02-07

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

    2018-02-07
    有用
    回复
  • 黄思程
    黄思程
    2018-02-06

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

    2018-02-06
    有用
    回复
  • 黄思程
    黄思程
    2018-01-29

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

    2018-01-29
    有用
    回复
  • 黄思程
    黄思程
    2018-01-12

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

    2018-01-12
    有用
    回复
  • 高国栋
    高国栋
    2018-04-09

    mark

    2018-04-09
    有用
    回复
  • 流云
    流云
    2018-03-01

    好坑。。2018.03.01还没修复

    2018-03-01
    有用
    回复
  • 灰常亮
    灰常亮
    2018-02-08

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

    2018-02-08
    有用
    回复
  • 灰常亮
    灰常亮
    2018-02-06
    //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代码，麻烦看一下，辛苦~

    2018-02-06
    有用
    回复
  • 灰常亮
    灰常亮
    2018-02-05

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

    2018-02-05
    有用
    回复
  • 灰常亮
    灰常亮
    2018-02-05

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

    2018-02-05
    有用
    回复
请 登录 后发表内容
相关文档