是这样的小程序中包含一个摄像头监控功能，在全屏显示的时候需要一个虚拟摇杆来控制直播摄像头左右摇动。

需要摇杆完成了 用image+ catchtouchmove非常流畅。 现在嵌入小程序出现问题了。

1. 摇杆的图片没办法放到video空间的层上面。查到方法使用了 cover-image
2. 使用 cover-image + catchtouchmove 代码没有任何改动 但是摇杆明显开始抖动了。

我应该怎么来解决他？

wxml： <cover-image style="width: 80px; height: 80px;left:{{leftLooks}}px;top:{{topLooks}}px;" catchtouchend='ImageReturn' catchtouchmove='ImageTouchMove' class="pic_tou" src="./img/yaogan_tou.png "></cover-image>

js:

      ImageTouchMove: function (e) {
      var self = this;
      //e.touches[0].clientX是触碰的位置，需要减40使得图片中心跟随触碰位置
      var touchX = e.touches[0].pageX - 40;
      var touchY = e.touches[0].pageY - 40;
      var movePos = self.GetPosition(touchX, touchY);
      self.setData({
          leftLooks: movePos.posX,
          topLooks: movePos.posY
      })
    },
    ImageReturn: function (e) {
      var self = this;
      self.setData({
          leftLooks: self.data.StartX,
          topLooks: self.data.StartY,
          angle: ""
      })
    },
    GetPosition: function (touchX, touchY) {
        var self = this;
        var DValue_X;
        var Dvalue_Y;
        var Dvalue_Z;
        var imageX;
        var imageY;
        var ratio;
        DValue_X = touchX - self.data.StartX;
        Dvalue_Y = touchY - self.data.StartY;
        Dvalue_Z = Math.sqrt(DValue_X * DValue_X + Dvalue_Y * Dvalue_Y);
        //触碰点在范围内
        if (Dvalue_Z <= self.data.radius) {
          imageX = touchX;
          imageY = touchY;
          return { posX: imageX, posY: imageY };
        }
    
        //触碰点在范围外
        else {
          ratio = self.data.radius / Dvalue_Z;
          imageX = DValue_X * ratio + 70;
          imageY = Dvalue_Y * ratio + 70;
          return { posX: imageX, posY: imageY };
    
        }
      }