带画布的离子水平滚动答案

【问题标题】：Ionic horizontal scroll with canvas带画布的离子水平滚动
【发布时间】：2018-12-26 08:52:44
【问题描述】：

我正在尝试通过在 ionic 上使用画布来创建网格系统。我已经重新搜索了以前的示例，但无法解决.. 无法在网格中水平滚动。提前谢谢..

我的代码在这里；

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';

        }

【问题讨论】：

标签： ionic3 html5-canvas horizontal-scrolling

【解决方案1】：

终于解决了这个问题..

grid.scss

    ...

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

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

...

【讨论】：