Ионная горизонтальная прокрутка с холстом - PullRequest
0 голосов
/ 26 декабря 2018

Я пытаюсь использовать сетку с помощью canvas на 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';

        }

1 Ответ

0 голосов
/ 27 декабря 2018

Наконец-то решили эту проблему ..

grid.scss

    ...

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

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

...
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...