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

【问题标题】：Fabric.js + IonicV3 - 'touch:gesture' eventFabric.js + IonicV3 - 'touch:gesture' 事件
【发布时间】：2019-05-05 22:45:38
【问题描述】：

最近，我一直在尝试使用 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 标签。

【问题讨论】：

标签： cordova ionic-framework ionic3 fabricjs fabricjs2

【解决方案1】：

所以在挖掘了为什么在滚动过程中不允许 touchmove 之后，我找到了this。我清楚地得到了我无法通过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 文档中找到。 here

【讨论】：