时间戳

首页 > 解决方案 > Fabric.js + IonicV3 - 'touch:gesture' 事件

cordova - Fabric.js + IonicV3 - 'touch:gesture' 事件

问题描述

最近，我一直在尝试使用 fabric.js 在我的 IonicV3 应用程序中实现捏合和缩放。

正如fabric.js 文档here中给出的那样，我无法访问事件，并且在控制台中出现错误：

[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 标签。

标签： cordovaionic-frameworkionic3fabricjsfabricjs2

解决方案

因此，在挖掘了为什么在滚动过程中不允许 touchmove 之后，我发现了这个。我清楚地得到了我无法通过的事件canvas.on({touch:gesture' : (event) => {'Do Anything'})

一旦我得到事件，我所做的就是使用下面提到的代码在具有标准 fabric.js 缩放功能的 Ionic 应用程序中执行捏合和缩放

       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 文档中找到。这里

推荐阅读