ios canvas ，movable-area爬坑之旅

小程序canvas爬坑之旅

canvas ios 报错canvasToTempFilePath:fail no image?

原因设置的display:initial；导致canvas不可见

canvas ios 画图出来的图片模糊

可能原因一：手机dpr像素不一致获取手机dpr进行适配

  const width = 375
  const height = 812
  // 初始化画布大小
  const dpr = wx.getWindowInfo().pixelRatio
  canvas.width = width * dpr
  canvas.height = height * dpr
  const top = height  * 0.256
  ctx.scale(dpr, dpr)

可能原因二：调整图片输出的尺寸,

wx.canvasToTempFilePath({
  x: 100,
  y: 200,
  width: 50,
  height: 50,
  destWidth: 50*3,
  destHeight: 100*3,
  canvasId: 'myCanvas',
  success: function(res) {
    console.log(res.tempFilePath)
  } 
})

可能原因三：canvas的宽高要用自带的width和height来写才是真正的画布大小

解决wx.showToast()消息提示框内容显示不全问题

第一种：修改提示内容，按其规定的长度去展示
第二种：将其 icon的属性值设置成 none即可

wx.showToast({
                title: '成功',//用户看到的提示信息
                icon: 'none',//提示图标，有error，success、none
                duration: 2000//停留时间
               })

canvas裁剪圆形不完整

ctx.save();   //当前区域保存
ctx.beginPath();   //开始新的区域   圆形裁剪不完整
ctx.arc(x+9+8, y+12+top+8, 8, 0, 2 * Math.PI, false) //画一个圆形裁剪区域
ctx.clip() //画了圆 再剪切  原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内
ctx.drawImage(image, x+9, y+12+top,16,16);   //在留言背景图上绘制头像
ctx.restore();   //恢复状态  不加导致只裁减了最后一个

ios机型背景可以拖动问题

在页面json中添加"disableScroll" :true

{
  "usingComponents": {},
  "disableScroll" :true
}

小程序海报页面ios机型动画缓慢问题解决

onChange方法里面重复太多次的setdata selectMessage数组导致性能缓慢
修改前html

  
     
         
           
           {{item.user_name}}
           
           {{item.name}}
         
       
   

修改前js：

onChange(e) {
    let selectMessage = this.data.selectMessage;
  
    for (let j = 0; j < selectMessage.length; j++) {
      if (e.currentTarget.dataset.index == selectMessage[j].id) {
        selectMessage[j].xxx = e.detail.x;//新的x 
     selectMessage[j].yyy = e.detail.y;
     }
    }
  
    this.setData({
      selectMessage:selectMessage
     })

  },
  stopMove(e){
    let selectMessage = this.data.selectMessage;

    let zindex = Date.parse(new Date())/ 1000;
    
     for (let j = 0; j < selectMessage.length; j++) {
       if (e.currentTarget.dataset.index == selectMessage[j].id) {
         selectMessage[j].index =  zindex
       }
     }
     this.setData({
       selectMessage:selectMessage
     })


  },

修改方案：记录当前拖拽的元素移动的宽高还有下标在bindtouchend结束之后找到移动的元素进行重新赋值即可
修改后js

onChange(e) {
    this.setData({
      changex: e.detail.x,//新的x 
      changey: e.detail.y,//新的y
      move_id:e.currentTarget.dataset.mid,//移动的id
      is_move:1,

    })
  },

  stopMove(e){
   
    let zindex = Date.parse(new Date())/ 1000;
    let x = this.data.changex;
    let y =  this.data.changey;
    let move_id = this.data.move_id;
    var that = this;
    that.setData({
       ["messageContent["+move_id+"].xxx"]:x,
       ["messageContent["+move_id+"].yyy"]:y,
       ["messageContent["+move_id+"].index"]:zindex
    });
}

ios端movable-area区域只有其中一部分 真机查看发现movable-area宽为0

movable-area 元素的定位是 position: relative;修改为absolute问题解决