收藏
回答

canvas绘制图片,传入绘制的宽高无法正确拉伸?

canvs绘制图片画布大小为动态设置,然后让图片拉伸填满画布,代码片段上宽度正确拉伸,高度无法正确拉伸,画布大小不动态设置可以正确拉伸,正式项目中宽高都不能正确拉伸,画布大小写死也是如此。但是正式项目只有绘制图片时传入小于画布大小很多才能正确拉伸。

代码片段代码:

 init(res) {
    const width = res[0].width
    const height = res[0].height


    const canvas = res[0].node
    const ctx = canvas.getContext('2d')


    const img = canvas.createImage()
    console.log(width,height);
    img.src = 'mapc.png'
    img.onload = () => {
      this._img = img
     
        ctx.drawImage(img, 00, width, height)


    }
  
    // console.log(this._img);
  },


  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    this.setData({
      w:300,
      h:200
    })
    wx.createSelectorQuery()
    .select('#canvas')
    .fields({
      node: true,
      size: true,
    })
    .exec(this.init.bind(this))
  },

html代码

<image src="./mapc.png"></image>
<canvas
  type="2d"
  id="canvas"
  style="width: {{w}}px; height: {{h}}px;"
></canvas>


效果如下:

动态设置画布大小,高度无法正确拉伸

画布大小设置写死300x300正确拉伸

正式项目代码:

drawMap (params) {
    wx.createSelectorQuery()
      .select('#canvas')
      .fields({
        nodetrue,
        sizetrue,
      })
      .exec(this.init.bind(this))
  },


  init(res){
    console.log(res);
    const width = res[0].width
    const height = res[0].height


    const canvas = res[0].node
    const ctx = canvas.getContext('2d')
    const img = canvas.createImage()
    img.src = '../../assets/image/mapc.png'
    img.onload = () => {
      this._img = img
      console.log(img.width);
      console.log(this._img);
      console.log(width,height);
      ctx.drawImage(img,0,0,width,height)
      
    }
    
   
        
    
    
  },


  /**
   * 生命周期函数--监听页面显示
   */
  onShowfunction () {
   
    let that = this
    let query = wx.createSelectorQuery()
    query.select(".map").boundingClientRect(res=>{
      console.log(res);
      that.setData({
        imgT:res.top,
        imgL:res.left,
        imgW:res.width,
        imgH:res.height,
      })
      this.drawMap()
    }).exec()


  },

html代码

<canvas id="canvas" style="width: {{imgW}}px; height: {{imgH}}px;" type="2d" canvas-id="canvas"></canvas>

效果如下:

动态设置画布大小

画布设置414x240其他不变

画布大小设置414x240,绘制大小传入300x100




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

2 个回答

  • 武曲心
    武曲心
    2022-04-27

    画布的宽高是变量设置的,图片绘制为啥不拿这些变量去做逻辑,而是去获取画布对象再取的宽高做逻辑?画布宽高setData的后续逻辑写到setData的回调里头,毕竟有发生页面渲染的动作。另外代码片段的链接在哪里?

    2022-04-27
    有用
    回复 3
    • 十三
      十三
      2022-04-27
      我试了,结果是和正式项目中图1一样,代码片段分享不了,错误代码2,一直报错
      2022-04-27
      回复
    • 武曲心
      武曲心
      2022-04-27回复十三
      代码片段改改,不要放onshow里面,做个按键
      2022-04-27
      回复
    • 十三
      十三
      发表于移动端
      2022-04-27回复武曲心
      好像解决了,把获取绘制调用放在设置画布大小之前就可以了,真是神奇了。。,
      2022-04-27
      回复
  • 十三
    十三
    2022-04-27

    正式项目中绘制传入宽高小于画布很多,其实仍然不能正确拉伸,只不过能看到全部,图片大小是800x551

    2022-04-27
    有用
    回复
登录 后发表内容