var rectConf = {
    xAxis: 10,  // 矩形框x轴坐标
    yAxis: 20,  // 矩形框y轴坐标
    width: 5,   // 矩形框宽度
    height: 30, // 矩形框高度
}
if (!this.isSolidCandle) { // 如果不是实心蜡烛图
    this.ctx.fillStyle = this.COLORS.MAINBG; // 主背景色
    this.ctx.fillRect(rectConf.xAxis, rectConf.yAxis, rectConf.width, rectConf.height);
    this.ctx.strokeRect(rectConf.xAxis, rectConf.yAxis, rectConf.width, rectConf.height);
    this.ctx.fillStyle = lineColor; // 线条颜色
} else {
    this.ctx.fillStyle = lineColor; // 线条颜色
    this.ctx.fillRect(rectConf.xAxis, rectConf.yAxis, rectConf.width, rectConf.height);
}

touchStartEvent(e) {
   this.longTapTimeout = setTimeout(() => {
      this.longTapFlag = true;
      this.longTap(touchOne);
   }, 200);
},
// 触摸移动事件
touchMoveEvent(e) {
   if (this.longTapTimeout) {
      clearTimeout(this.longTapTimeout);
      this.longTapTimeout = null;
   }
   if (this.longTapFlag) {
      // 长按滑动事件（即十字线滑动事件）
      this.touchMove();
   } else {
      // k线滑动事件
      this.swipe();
   }
} 

// 放大缩小刻度
const scale = (touchDistance - this.nextTouchDistance) / this.nextTouchDistance;
// 放大缩小事件
this.zoomIn(centerX, scale);

// 两指x轴方向距离
const xLen = Math.abs(
     e.targetTouches[1].pageX - e.targetTouches[0].pageX,
);
// 两指y轴方向距离（横屏需要）
const yLen = Math.abs(
     e.targetTouches[1].pageY - e.targetTouches[0].pageY,
);
// canvas内容区矩形的边框信息
const clientRect = this.container.getBoundingClientRect();
// 相对于屏幕的中心点
let center;
// 相对于canvas图层的中心点
let centerX;
center = e.targetTouches[1].clientX - (e.targetTouches[1].clientX -         
         e.targetTouches[0].clientX) / 2;
centerX = center - clientRect.left;

// 两指间距离 （根据勾股定理计算）
const touchDistance = Math.sqrt(xLen * xLen + yLen * yLen);

// 需要放大缩小刻度
const scale = (touchDistance - this.nextTouchDistance) / this.nextTouchDistance;
// 放大缩小处理
this.zoomIn(centerX, scale);
// 记住本次两指间距离
this.nextTouchDistance = touchDistance;

zoomIn(centerX, scale) {
    // 中心刻度
    const centerScale = Math.ceil(centerX / this.cellWidth); // this.cellWidth为图中柱状图宽度
    // K线数组索引（刻度不变时中间坐标点）
    const centerIndex = Math.max(Math.min(this.kData.length - 1, centerScale - 1), 0);
    const originalScale = this.scale;
    this.scale += scale;
    if (this.scale <= 0.5) {
      this.scale = 0.5;
    } else if (this.scale > 4) {
      this.scale = 4;
    }
    
    if (originalScale !== this.scale) {
      // K线条目数
      this.count = Math.floor(60 / this.scale)
      this.cellWidth = this.canvasWidth / this.count;
      // 计算刻度变动后中间坐标点
      const centerScale1 = Math.ceil(centerX / this.cellWidth );
      const centerIndex1 = Math.max(Math.min(this.kData.length - 1, centerScale1 - 1),0);
      const scaleDiff = centerIndex1 - centerIndex;
      let index = this.indexStart - scaleDiff;
      index = Math.min(index, Math.max(this.allData.length - this.count, 0));
      index = Math.max(index, 0);
      if (index === 0 && this.loadMore === false) {
        this.loadMore = true;
        this.loadMoreCallback();
        return;
      }
      this.indexStart = index;
      this.indexStartTemp = index;
      const data = this.allData.slice(index, index + this.count) || [];
      // 重新渲染图形
      this.drawKLine();
   }
},

// 触摸结束事件
touchendEvent(e) {
   this.touchEndTime = new Date().getTime();
   // 开始移动事件和触摸结束事件时间间隔
   const intervalTime = this.touchEndTime - this.startMoveTime;
   // 最后一次滑动结束和开始滑动时间间隔
   let timeStamp = this.endMoveTime - this.startMoveTime;
   timeStamp = timeStamp > 0 ? timeStamp : 8;
   // 停顿时间超过100ms不产生惯性滑动;
   if (intervalTime < 100) {
     this.speed = Math.abs((this.startX - this.currentX) / timeStamp); // 计算速度
     this.acceleration = this.speed / this.sensitivity; // 根据灵敏度（sensitivity）计算加速度
     this.frameStartTime = new Date().getTime(); // 动画开始时间
     this.inertiaFrame = requestAnimationFrame(this.moveByInertia);
   }
}
// 惯性滑动时间
moveByInertia() {
    this.frameEndTime = new Date().getTime(); // 每次动画结束时间
    this.frameTime = this.frameEndTime - this.frameStartTime; // 动画执行时间
    if (this.currentX < this.startX) {
      // 向左惯性滑动;
      this.roll.dir = 1;
    } else {
      // 向右惯性滑动;
      this.roll.dir = -1;
   }
   this.speed = Math.max(this.speed - this.acceleration * this.frameTime, 0); // 逐渐降低速度
   if (this.speed === 0) {
     cancelAnimationFrame(this.inertiaFrame);
     this.touchEnd();
     return;
   }
   this.roll.len += this.speed;
   this.swipe(this.roll); // 执行滑动K线方法
   this.frameStartTime = this.frameEndTime;
   this.inertiaFrame = requestAnimationFrame(this.moveByInertia);
}

// 惯性回弹
 springbackByInertia() {
    // 设置到达临界点后允许滑动K线条数为5根
    const roll = { dir: 1, len: 5 };
    // indexStartTemp是k线数组开始的标识位
    // 如果this.indexStartTemp > this.allData.length - this.count则判断到达了最左侧的临界点
    // 如果this.indexStartTemp < 0则判断达到了最右侧的境界点
    if (
      this.indexStartTemp > this.allData.length - this.count ||
      this.indexStartTemp < 0
    ) {
      this.swipe(roll);
      this.springInertiaFrame = requestAnimationFrame(this.springbackByInertia);
    } else {
      cancelAnimationFrame(this.springInertiaFrame);
      this.swipe(roll);
    }
},

 // 是否为轻击事件（触摸时间小于100ms且移动距离小于5px）
isTap() {
  if (this.touchEndTime - this.touchStartTime < 100) {
     if (!this.currentX && !this.currentY) {
     return true;
   }
     const xScale = Math.abs(this.currentX - this.startX);
     const yScale = Math.abs(this.currentY - this.startY);
     if (xScale < 5 && yScale < 5) {
       return true;
     }
   }
   return false;
},