Fabric.js + IonicV3 - событие «прикосновение: жест» - PullRequest
Новая
       11

Fabric.js + IonicV3 - событие «прикосновение: жест»

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

В последнее время я пытался реализовать масштабирование в моем приложении IonicV3 с помощью fabric.js.

Как указано в документации по fabric.js здесь , яЯ не могу получить доступ к evevnts, и я получаю сообщение об ошибке в консоли: 

[Intervention] Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.

Вот мой код: 

this.canvas.on(
            'touch:gesture', function (opt) {
                opt.e.preventDefault();
                opt.e.stopPropagation();
                console.log("Fabric Canvas gesture Events----", opt);
                var delta = opt.e.deltaY;
                var pointer = this.canvas.getPointer(opt.e);
                var zoom = this.canvas.getZoom();
                zoom = zoom + delta / 200;
                if (zoom > 20) zoom = 20;
                if (zoom < 0.01) zoom = 0.01;
                this.canvas.zoomToPoint({ x: opt.e.offsetX, y: opt.e.offsetY }, zoom);
            });

И это HTML-код: 

   <ion-scroll scrollY="true" scrollX="true" style="width: 100%; height: 100%;" >
        <div #pageContainer id="pageContainer" class="page" (click)="enableDisableObjetMove()"  >            
                    <canvas #canvas id="canvas"></canvas>
        </div>
    </ion-scroll>

Хотя в коде HTML я также пытался удалить тег ion-scroll + Также пытался сохранить только тег canvas.

1 Ответ

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

Итак, после выяснения, почему не было разрешено касание во время прокрутки, я обнаружил это .И я ясно получил события, которые я не смог получить с помощью canvas.on({touch:gesture' : (event) => {'Do Anything'})

После того, как я получил события, все, что я сделал, - это использовал приведенный ниже код для выполнения пинч и масштабирования в приложении Ionic со стандартнымФункция масштабирования fabric.js 

       var delta = event.e.deltaY;
        var pointer = this.canvas.getPointer(event.e);
        var zoom = this.canvas.getZoom();
        zoom = zoom + delta / 200;
        if (zoom > 20) zoom = 20;
        if (zoom < 0.01) zoom = 0.01;
        this.canvas.zoomToPoint({ x: event.e.offsetX, y: event.e.offsetY }, zoom);
        event.e.preventDefault();
        event.e.stopPropagation();

Код можно найти в документации fabric.js. здесь

...