canvas 的离子水平滚动

Question

我正在尝试通过在 ionic 上使用 canvas 来获得网格系统。我已经研究过以前的样本，但无法解决.. 无法在网格中水平滚动。提前致谢..

我的代码在这里；

grid.html

<ion-content scrollX="true" scrollY="true">

 <canvas id="grid" (press)="pressEvent($event)"
  width="4000" height="4000"></canvas>

</ion-content>

grid.ts

      private _CANVAS  : any;
      private _CONTEXT : any;

 ionViewDidLoad() 
  {

    this.drawGrid(4001, 4001, "grid");

  }

         drawGrid(w, h, id) {
            this._CANVAS = document.getElementById(id);
            this._CONTEXT = this._CANVAS.getContext('2d');
            this._CONTEXT.beginPath();
            this._CONTEXT.canvas.width  = w;
            this._CONTEXT.canvas.height = h;

          for (w = 5; w <= 4000; w += 50) {
              this._CONTEXT.moveTo(w, 0);
              this._CONTEXT.lineTo(w, 4000);
          }
          for (h = 5; h < 4000; h += 50) {
            this._CONTEXT.moveTo(0, h);
            this._CONTEXT.lineTo(4000, h);
        }

        this._CONTEXT.strokeStyle = "#a9a9aa";
        this._CONTEXT.lineWidth = 2.5;
        this._CONTEXT.stroke();
        this._CONTEXT.font = "45px Arial"; 
        this._CONTEXT.fillStyle = 'black';

        }

Answer 1

终于解决了这个问题..

grid.scss

    ...

      canvas {
        touch-action: auto !important;
        user-select: auto !important;
        -webkit-user-drag: auto !important;
     }

     .scroll-content {
        overflow-x: scroll !important;
     }

...

canvas 的离子水平滚动

Ionic horizontal scroll with canvas

horizontal-scrolling

html5-canvas

ionic3