收藏
回答

求助管理员和大神:canvasToTempFilePath找不到canvasid

问题模块
API和组件

为什么不能用 详情看代码




最后一次编辑于  2017-12-13
回答关注问题邀请回答
收藏

8 个回答

  • 小程序技术专员-june
    小程序技术专员-june
    2017-12-13

    调this.canvas()的时机不对,需要在页面渲染完成后调用才有效,比如onReady钩子里调用。

    2017-12-13
    赞同
    回复
  • 小程序技术专员-june
    小程序技术专员-june
    2017-12-13

    问题仍然未复现。能否提供一下能够复现问题的完整代码?

    2017-12-13
    赞同
    回复
  • 小程序技术专员-june
    小程序技术专员-june
    2017-12-13

    问题未复现。请提供一下微信版本和基础库版本。

    2017-12-13
    赞同
    回复
  • 小程序技术专员-june
    小程序技术专员-june
    2017-12-13

    你好,请提供一下出现问题的机型和微信版本,以及能复现问题的简单代码示例。

    2017-12-13
    赞同
    回复
  • 。
    2017-12-13

    微信开发者工具的打印结果

    2017-12-13
    赞同
    回复
  • 。
    2017-12-13

    js代码:


    // pages/test/test.js

    Page({


    /**

      * 页面的初始数据

      */

    data: {

    item:[222,11,11,23,111,111,333],

    week: ['一', '二', '三', '四', '五', '六', '七'],

    },


    /**

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

      */

    onLoad: function (options) {

    this.initChart()

    this.canvas()

    },

    canvas: function () {

    var that = this

    console.log("jinlaile")

    wx.canvasToTempFilePath({

    canvasId: 'firstCanvas',

    success: function (res) {

    console.log("chulaile")

    console.log(res.tempFilePath)

    },

    fail(res) {

    console.log(res)

    }


    })

    },

    /**

      *   折线图

      */

    initChart: function () {


    const ctx = wx.createCanvasContext('firstCanvas')


    ctx.beginPath()

    ctx.setStrokeStyle('#999999')

    ctx.setFillStyle('#ffffff')

    ctx.setLineWidth(1)

    const leftTopX = this.getEleWidth(60)

    const leftTopY = this.getEleWidth(10)//左上点

    const leftBottomX = this.getEleWidth(60)

    const leftBottomY = this.getEleWidth(200)//原点

    const rightBottomX = this.getEleWidth(360 + 10)

    const rightBottomY = this.getEleWidth(200)//右下点

    const yHeight = this.getEleWidth(444)

    const xWidth = this.getEleWidth(588)

    ctx.moveTo(leftTopX, leftTopY)

    //y轴

    ctx.lineTo(leftBottomX, leftBottomY)

    //x轴

    ctx.lineTo(rightBottomX, rightBottomY)

    ctx.setFontSize(this.getEleWidth(30))

    ctx.stroke()

    this.drawYScale(ctx);

    this.drawXScale(ctx);


    //画折线

    this.drawCharts(ctx);

    ctx.stroke()


    ctx.draw(true)

    },

    drawYScale: function (ctx) {

    var that = this;

    var lists = that.data.item

    var scaleStartX = this.getEleWidth(60)     //竖向刻度线的起始点

    var scaleEndX = this.getEleWidth(60 + 15)

    var littleScaleEndX = this.getEleWidth(60 + 7)  //竖向刻度线末端y坐标

    const scaleStartY = this.getEleWidth(200)  //刻度线底部起始位置y坐标

    const yHeight = this.getEleWidth(190)   //y轴高度

    var oneScaleX = yHeight / 5      //计算每个大段刻度线相隔多远

    ctx.setFontSize(this.getEleWidth(15))

    var textX = this.getEleWidth(55)

    var max1 = lists[0];

    for (var j1 = 0; j1 < 7; j1++) {

    if (parseInt(lists[j1]) > parseInt(max1)) {

    max1 = lists[j1];

    }

    }

    var t1 = 0;

    while ((max1 / 10) > 1) {

    max1 = (max1 / 10).toFixed(0);

    t1++;

    }

    var big1 = Math.pow(10, t1) * (parseInt(max1) + 1)

    for (var i = 1; i < 6; i++) {

    var scaleEndY = scaleStartY - oneScaleX * i

    ctx.moveTo(scaleStartX, scaleEndY)

    ctx.lineTo(scaleEndX, scaleEndY)

    var littleScaleStartY = scaleStartY - (yHeight / 5) * (i - 1)

    ctx.setTextAlign('right')

    ctx.fillText(big1 / 5 * i, textX, scaleEndY + this.getEleWidth(10))

    ctx.stroke();

    }

    },

    drawXScale: function (ctx) {

    var that = this;

    var week = that.data.week;

    var scaleStartY = this.getEleWidth(200) //竖向虚线开始Y

    var scaleEndY = this.getEleWidth(10)    //竖向虚线结束Y

    const xWidth = this.getEleWidth(310)      //横坐标最大宽度      

    const xMaginLeft = this.getEleWidth(60)    //原点横坐标

    const oneScaleX = xWidth / 6          //每个横坐标间距

    const space = this.getEleWidth(10)

    for (var i = 1; i < 7; i++) {

    var toEndX = xMaginLeft + oneScaleX * i;

    that.drawDashLine(ctx, toEndX, scaleStartY, toEndX, scaleEndY, space)


    }

    for (var i = 0; i < 7; i++) {

    var toEndX = xMaginLeft + oneScaleX * i;

    ctx.fillText(week[i], toEndX - this.getEleWidth(5), scaleStartY + this.getEleWidth(30))

    }

    },

    //画虚线

    drawDashLine: function (ctx, x1, y1, x2, y2, dashLength) {  //传context对象,始点x和y坐标,终点x和y坐标,虚线长度

    ctx.beginPath()

    ctx.setLineWidth(0.5)

    var dashLen = dashLength === undefined ? 3 : dashLength,

    xpos = x2 - x1, //得到横向的宽度;

    ypos = y2 - y1, //得到纵向的高度;

    numDashes = Math.floor(Math.sqrt(xpos * xpos + ypos * ypos) / dashLen);

    //利用正切获取斜边的长度除以虚线长度,得到要分为多少段;

    for (var i = 0; i < numDashes; i++) {

    if (i % 2 === 0) {

    ctx.moveTo(x1 + (xpos / numDashes) * i, y1 + (ypos / numDashes) * i);

    //有了横向宽度和多少段,得出每一段是多长,起点 + 每段长度 * i = 要绘制的起点;

    } else {

    ctx.lineTo(x1 + (xpos / numDashes) * i, y1 + (ypos / numDashes) * i);

    }

    }

    ctx.stroke();

    },

    drawCharts: function (ctx) {

    //   画折线

    ctx.beginPath()

    ctx.setStrokeStyle('#09D4F5')

    ctx.setLineWidth(2)

    var that = this;

    var list = that.data.item

    const leftTopX = this.getEleWidth(60)

    const leftBottomY = this.getEleWidth(200)

    const yHeight = this.getEleWidth(190)

    const xWidth = this.getEleWidth(310)


    var ma = list[0];

    for (var m = 0; m <= 6; m++) {

    if (parseInt(list[m]) > ma) {

    ma = list[m]

    }

    }

    var t = 0;

    while ((ma / 10) > 1) {

    ma = (ma / 10).toFixed(0);

    t++;

    }

    var big = Math.pow(10, t) * (parseInt(ma) + 1)

    console.log("big=" + big)

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

    var height = list[i];

    var x = leftTopX + (xWidth / (list.length - 1)) * i

    var y = leftBottomY - (height / big) * yHeight

    if (i == 0) {

    ctx.moveTo(x, y)

    } else {

    ctx.lineTo(x, y)


    }


    }

    ctx.stroke()

    //画点

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

    var height = list[i];

    var x = leftTopX + (xWidth / (list.length - 1)) * i

    var y = leftBottomY - (height / big) * yHeight

    if (i == 0) {

    ctx.setFillStyle('red')

    ctx.beginPath();

    ctx.arc(x, y, 2, 0, 2 * Math.PI * 2);


    } else {

    ctx.setFillStyle('red')

    ctx.beginPath();

    ctx.arc(x, y, 2, 0, 2 * Math.PI * 2);


    }

    ctx.fill();

    }

    //画阴影

    for (var i = 1; i < 7; i++) {

    var height = list[i];

    var height1 = list[i - 1];

    var x = leftTopX + (xWidth / (list.length - 1)) * i

    var y = leftBottomY - (height / big) * yHeight

    var x1 = leftTopX + (xWidth / (list.length - 1)) * (i - 1)

    var y1 = leftBottomY - (height1 / big) * yHeight   //上个点的y坐标

    ctx.setFillStyle('rgba(39,60,125,0.5)')

    ctx.beginPath();

    ctx.moveTo(x, leftBottomY)

    ctx.lineTo(x, y)

    ctx.lineTo(x1, y1)

    ctx.lineTo(x1, leftBottomY)

    ctx.fill();

    }

    ctx.draw(true)

    }

    ,

    //为了获取按钮的宽度

    getEleWidth: function (w) {

    var real = 0;

    try {

    var res = wx.getSystemInfoSync().windowWidth;

    var scale = (750 / 2) / (w / 2);//以宽度750px设计稿做宽度的自适应

    real = Math.floor(res / scale);

    return real;

    } catch (e) {

    return false;

    }

    },

    /**

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

      */

    onReady: function () {

    },


    /**

      * 生命周期函数--监听页面显示

      */

    onShow: function () {

    },


    /**

      * 生命周期函数--监听页面隐藏

      */

    onHide: function () {

    },


    /**

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

      */

    onUnload: function () {

    },


    /**

      * 页面相关事件处理函数--监听用户下拉动作

      */

    onPullDownRefresh: function () {

    },


    /**

      * 页面上拉触底事件的处理函数

      */

    onReachBottom: function () {

    },


    /**

      * 用户点击右上角分享

      */

    onShareAppMessage: function () {

    }

    })


    html代码:

    <canvas canvas-id="firstCanvas" ></canvas>


    制成的效果图



    想把这个折线图 转成图片 然后把路径传给  image 的src  但是打印不出路径

    2017-12-13
    赞同
    回复
  • 。
    2017-12-13

    微信版本是6.5.23  基础库是1.6.6

    2017-12-13
    赞同
    回复
  • 。
    2017-12-13

    这个是在微信开发者工具上的  然后我用真机试了也没有  手机型号是红米note4x


    canvas: function () {

    var that = this

    console.log("jinlaile")

    wx.canvasToTempFilePath({

    canvasId: 'firstCanvas',

    success: function (res) {

    console.log("chulaile")

    console.log(res.tempFilePath)

    },

    fail(res){

    console.log(res)

    }

    })

    }



    <canvas class="canvas_view" canvas-id="firstCanvas"></canvas>


    2017-12-13
    赞同
    回复