CODEWITHSUNDEEP
ionic3html5-canvashorizontal-scrolling
hkacan
hkacan

Reputation: 213

Ionic horizontal scroll with canvas

I am trying to have grid system via using canvas at ionic. I have reasearched previous samples, but could not solve.. Can't scroll horizontally in the grid. Thanks in advance..

My code is here;

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

        }

Upvotes: 1

Views: 353

Answers (1)

hkacan
hkacan

Reputation: 213

Finally solved this problem..

grid.scss

    ...

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

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

...

Upvotes: 1

Related Questions