ios canvas ，movable-area爬坑之旅

最新推荐文章于 2024-05-10 09:48:16 发布

weixin_43632791

最新推荐文章于 2024-05-10 09:48:16 发布

阅读量1k

点赞数

分类专栏：小程序文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_43632791/article/details/126307558

版权

小程序专栏收录该内容

1 篇文章 0 订阅

订阅专栏

小程序canvas爬坑之旅

canvas ios 报错canvasToTempFilePath:fail no image?

<canvas type="2d" id="mycanvas" style="display:initial;" ></canvas>

原因设置的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来写才是真正的画布大小

<canvas type="2d" id="mycanvas" style="width: 375px;height: 812px;"></canvas>

解决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

  <movable-area   class="content_message" >
     <block wx:for="{{selectMessage}}" wx:key='id' >
         <movable-view  direction="all" bindchange="onChange"    bindtouchend="stopMove"  x="{{item.xxx}}" y="{{item.yyy}}" data-id='{{item.user_id}}' data-index='{{item.id}}'   data-zindex='{{item.index}}' data-mid="{{index}}"   class="image_view" style="background-image: url('{{item.image}}'); background-size:100% 100%;z-index: {{item.index}};">
           <image class="tx"  src="{{item.user_image}}"></image>
           <text class="nickname" >{{item.user_name}}</text>
           <view class="text_area_new">
           <text>{{item.name}}</text></view>
         </movable-view>
       </block>
   </movable-area>

修改前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
    });
}