收藏
回答

Canvas 绘制文本内容,开发环境正常显示,真机环境不显示

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug canvas 客户端 6.5.3 2.0.0

Canvas 绘制文本内容,开发环境正常显示,真机环境不显示

开发环境下:


真机环境下:


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

4 个回答

  • M。
    M。
    2018-11-20

    有先后层级之分,你是先画的文本吗?

    2018-11-20
    有用
    回复
  • 这都申请了
    这都申请了
    2018-11-19

    微信版本太低了吧


    2018-11-19
    有用
    回复 14
    • 雷神
      雷神
      2018-11-19

      换成最新的版本,还是没有显示

      2018-11-19
      回复
    • 这都申请了
      这都申请了
      2018-11-19回复雷神

      多用几个手机测测呢

      2018-11-19
      回复
    • 雷神
      雷神
      2018-11-19回复这都申请了

      也没不来,canvas绘图,有没有层级关系?

      但是我都是循环输出的

      2018-11-19
      回复
    • 这都申请了
      这都申请了
      2018-11-19回复雷神

      讲道理不应该,如果是图片的话还能理解,图片需要一系列的操作,画文本应该是挺常规的。最好能发个代码片段

      2018-11-19
      回复
    • 雷神
      雷神
      2018-11-19回复这都申请了

      onLoad: function (options) {

      let that = this;

      let id = options.id;

      var park_name = app.globalData.wxacode_title;

      let fansi = wx.getStorageSync('fansi_fansi');

      let activity_list = wx.getStorageSync('fansi_activity_list');

      let activity_num = wx.getStorageSync('fansi_activity_num');

      let food_list = wx.getStorageSync('fansi_food_list');

      let food_num = wx.getStorageSync('fansi_food_num');

      let region_list = wx.getStorageSync('fansi_region_list');

      let region_num = wx.getStorageSync('fansi_region_num');

      var select_year = wx.getStorageSync('fansi_select_year');

      var select_year = select_year + '年';

      let old_year = wx.getStorageSync('fansi_old_year');

      old_year = old_year + '年';


      let user_info = wx.getStorageSync('user_info');

      let zmlxj_user_info = wx.getStorageSync('zmlxj_user_info');

      //需要动态计算画板的高度

      let windowWidth = 700;

      let windowHeight = parseInt(region_list.length * 70) + parseInt(activity_list.length * 70) + 450;


      wx.getSystemInfo({

      success: function (res) {

      //windowHeight = res.windowHeight + 100;

      windowWidth = res.windowWidth;

      that.setData({ 'windowHeight': windowHeight, 'windowWidth': windowWidth ,'fansi':fansi,'activity_list':activity_list,'activity_num':activity_num,'food_list':food_list,'food_num':food_num,'region_list':region_list,'region_num':region_num,'select_year':select_year,'old_year':old_year,'user_info':user_info,'id':id});

      },

      });


      //获得canvas上线文

      var context = wx.createCanvasContext('fansi_img');


      context.setFillStyle('#c10211'); //#c10211

      //整个区域的大小

      context.fillRect(0, 0, windowWidth, windowHeight);

      var r = 60;

      var x = windowWidth / 2;

      var y = 2 * r;

      var d = 2 * r;

      var cx = x;

      var cy = r + 20;


      context.save();

      context.setFillStyle("white");

      context.arc(cx, cy, r, 0, 2 * Math.PI);

      context.clip();

      context.fill();



      context.setFontSize(40);

      context.setFillStyle('red');//#fc9de4 red

      context.setTextAlign('center');

      var head_icon_height = 40 + 2 * 40 + 40;

      context.fillText(old_year, windowWidth / 2, r + 30);




      //绘制用户的名称

      //绘制姓名

      let nickName = user_info['nickName'] ? user_info['nickName'] : (zmlxj_user_info['user_nick'] ? zmlxj_user_info['user_nick'] : '');

      if (nickName) {

      context.setFontSize(20);

      context.setFillStyle('white');//#fc9de4 white

      context.setTextAlign('center');

      var head_icon_height = 40 + 2 * 40 + 40;

      context.fillText(nickName, windowWidth / 2, head_icon_height);

      }




      var park_name_height = head_icon_height + 40

      var title_ = select_year + '跟着【' + park_name + '】一起自驾世界一起去过' + region_num + "个城市"+activity_num+'次活动';

      var title_length = 10 * that.zh_length(title_);

      console.log(windowHeight)

      if (title_length > windowWidth - 80) {

      //需要多行

      var title_line = parseInt(title_length / windowWidth);

      if (title_line == 0) {

      title_line = 2;

      }

      else {

      title_line += 1;

      }

      var line_length = title_length / 10 - parseInt(title_length / 10 / 2);

      var index = 0;

      for (var t_i = 0; t_i < title_line; t_i++) {

      context.setFontSize(25);

      context.setFillStyle('white');

      context.setTextAlign('left');

      var title_temp = utils.sub_string(title_, 0 + index, 30, '');

      context.fillText(title_temp['str'], 10, park_name_height + t_i * 30);

      index = title_temp['index'];

      }

      }

      else {

      //只需要一行就可以

      context.setFontSize(25);

      context.setFillStyle('white');

      context.setTextAlign('center');

      context.fillText(title_, windowWidth / 2 - that.zh_length(park_name) * 10 / 2 + 40, park_name_height);

      }


      var region_height = 280;

      for (var i_1 = 0; i_1 < region_list.length; i_1++) {

      context.setFillStyle("white");

      context.setStrokeStyle('white');

      context.fillRect(40, parseInt(region_height) - 40 + i_1 * 70, parseInt(windowWidth) - 80, 60);

      if (region_list[i_1].is_join == 1) {

      context.setFillStyle("red");

      }

      else {

      context.setFillStyle("black");

      }

      context.setFontSize(20);

      context.setTextAlign('left');

      context.fillText(region_list[i_1].title, windowWidth / 2 - that.zh_length(region_list[i_1].title) * 10 / 2, parseInt(region_height) + i_1 * 70);

      }

      var activity_height = parseInt(region_height) + parseInt(region_list.length * 70);

      for (var j = 0; j < activity_list.length; j++) {

      context.setFillStyle("white");

      context.setStrokeStyle('white');

      context.fillRect(40, parseInt(activity_height) - 40 + j * 70, parseInt(windowWidth) - 80, 60);

      //context.fill();

      if (activity_list[j].is_join == 1) {

      context.setFillStyle("red");

      }

      else {

      context.setFillStyle("black");

      }

      context.setFontSize(20);

      context.setTextAlign('left');

      let activity_length = that.zh_length(activity_list[j].activity_name) * 10;

      if (activity_length > windowWidth - 80) {

      var title_temp_ = utils.sub_string(activity_list[j].activity_name, 0, 30, '');

      context.fillText(title_temp_['str'], 40, parseInt(activity_height) + j * 70);

      }

      else {

      context.fillText(activity_list[j].activity_name, windowWidth / 2 - that.zh_length(activity_list[j].activity_name) * 10 / 2, parseInt(activity_height) + j * 70);

      }

      }

      var wxacode_height = activity_height + parseInt(activity_list.length) * 70;

      //绘制二维码

      if (fansi['wxacode'])

      wx.downloadFile({

      url: fansi['wxacode'], //仅为示例,并非真实的资源

      success: function (res) {

      // 只要服务器有响应数据,就会把响应内容写入文件并进入 success 回调,业务需要自行判断是否下载到了想要的内容

      if (res.statusCode === 200) {

      context.drawImage(res.tempFilePath, (windowWidth - 150) / 2, wxacode_height, 150, 150);

      context.draw(true);

      }

      }

      });

      context.draw();

      },


      /**

        * 生命周期函数--监听页面初次渲染完成

        */

      onReady: function () {



      },


      2018-11-19
      回复
    查看更多(9)
  • 卢霄霄
    卢霄霄
    2018-11-19

    打开调试。。看看报啥错了吗?

    2018-11-19
    有用
    回复 1
    • 雷神
      雷神
      2018-11-19

      没有报错

      2018-11-19
      回复
  • 雷神
    雷神
    2018-11-19

    在线急等

    2018-11-19
    有用
    回复
登录 后发表内容