收藏
回答

canvas 在网络请求的回调中执行无效

canvas 在网络请求的回调中执行无效

最后一次编辑于  2018-08-28
回答关注问题邀请回答
收藏

2 个回答

  • 肖杨
    肖杨
    2018-08-28

    应该是这样的  

    2018-08-28
    赞同
    回复
  • 卢霄霄
    卢霄霄
    2018-08-28

    无图无真相,代码截图和效果图来一下呢

    2018-08-28
    赞同
    回复 3
    • 肖杨
      肖杨
      2018-08-28

      /**

        * 生命周期函数--监听页面加载

        */

      onLoad: function(options) {

      that = this;

      that.setData({

      ideaId: options.ideaid,

      winWidth: deviceInfo.windowWidth,

      winHeight: deviceInfo.windowHeight,

      });



      that.getSelectionRecord();


      },



      getSelectionRecord: function() {

      var param = {

      "ideaid": that.data.ideaId

      }


      var params = {

      "methodName": "ideaEvaluateInfo",

      "param": JSON.stringify(param),

      "url": app.globalData.url

      };


      NetworkService.doPost(params,

      function successFunc(res) {

      // Tools.logE("盲评记录");

      Tools.logE(res);

      if (res.code == 0) {


      var obj = res.data[0];


      // obj.idearesultmap.idea_state = util.formatIdeaState(obj.idearesultmap.idea_state)

      var arr = obj.expertList;


      for (var i = 0; i < arr.length; i++) {

      // obj.expertList[i].evl_exp_result = util.formatExpertEvlResult(arr[i].evl_exp_result);

      // Tools.logE("arr[i].evl_audit_time =" + arr[i].evl_audit_time);

      if (arr[i].evl_audit_time != undefined) {

      obj.expertList[i].evl_audit_time = arr[i].evl_audit_time.substring(0, 10);

      }


      }


      that.setData({

      recordDetail: obj,

      });


      if (obj.map[0].evlexpresult == "专家评审通过") {

      that.setData({

      pass: obj.map[0],

      noPass: obj.map[1],

      });

      } else {

      that.setData({

      pass: obj.map[1],

      noPass: obj.map[0],

      });

      }


      var item = that.data.detail.ideastate;

      if (item == "dt_idea_state_toselect" || item == "dt_idea_state_inqueue" || item == "dt_idea_state_eliminate" || item == "dt_idea_state_overdue") {


      that.setData({

      showRecordInfo: false,

      });

      } else {


      var totalItems = that.data.pass.sum + that.data.noPass.sum;

      var rightItems = that.data.pass.sum;


      Tools.logD("rightItems =" + rightItems)

      Tools.logD("totalItems =" + totalItems)

      that.showScoreAnimation(rightItems, totalItems);

      that.setData({

      showRecordInfo: true,

      });

      }

      }

      },

      function errorFunc(err) {

      Tools.logE(err);

      },

      true

      );


      },




      showScoreAnimation: function(rightItems, totalItems) {

      /*

         cxt_arc.arc(x, y, r, sAngle, eAngle, counterclockwise);

         x                     Number    圆的x坐标

         y                     Number    圆的y坐标

         r                     Number    圆的半径

         sAngle              Number    起始弧度,单位弧度(在3点钟方向)

         eAngle              Number    终止弧度

         counterclockwise      Boolean   可选。指定弧度的方向是逆时针还是顺时针。默认是false,即顺时针。

         */

      let that = this;

      let copyRightItems = 0;

      that.setData({

      timer: setInterval(function() {

      copyRightItems++;

      if (copyRightItems == rightItems) {

      clearInterval(that.data.timer)

      } else {

      // 页面渲染完成

      // 这部分是灰色底层

      let cxt_arc = wx.createCanvasContext('canvasArc'); //创建并返回绘图上下文context对象。

      cxt_arc.setLineWidth(30); //绘线的宽度

      cxt_arc.setStrokeStyle('#d2d2d2'); //绘线的颜色

      cxt_arc.setLineCap('line'); //线条端点样式

      cxt_arc.beginPath(); //开始一个新的路径

      cxt_arc.arc(53, 53, 36, 0, 2 * Math.PI, false); //设置一个原点(53,53),半径为40的圆的路径到当前路径

      cxt_arc.stroke(); //对当前路径进行描边

      //这部分是蓝色部分

      cxt_arc.setLineWidth(30);

      cxt_arc.setStrokeStyle('#3ea6ff');

      cxt_arc.setLineCap('line')

      cxt_arc.beginPath(); //开始一个新的路径

      cxt_arc.arc(53, 53, 36, -Math.PI * 1 / 2, 2 * Math.PI * (copyRightItems / totalItems) - Math.PI * 1 / 2, false);

      cxt_arc.stroke(); //对当前路径进行描边

      cxt_arc.draw();

      }

      }, 20)

      })

      },


      2018-08-28
      回复
    • 肖杨
      肖杨
      2018-08-28


      2018-08-28
      回复
    • 卢霄霄
      卢霄霄
      2018-08-28回复肖杨

      你这个代码好多啊。。。能做成代码片段吗?

      https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

      另外,这个一行最好放到that.setData的上面一行


      2018-08-28
      回复