javascript - 在 fabric.js 中更改双指缩放灵敏度

标签 javascript touch fabricjs

我有一个自定义构建的 fabric.js 包,支持触摸。现在我可以使用双指缩放手势缩放任何对象。问题是缩放真的非常敏感,我几乎不移动我的手指,对象被巨大地缩放。

我在文档中找不到太多关于如何更改灵敏度的信息。我知道 Event.js 用于处理 fabric.js 中的触摸事件。有什么办法可以改变这种敏感度吗?

最佳答案

好吧,我最终自己实现了触摸控制,这是我编写的代码。此代码放置在我的自定义 fabric.js 对象的 added 事件中。

////////////////////////////// Touch event handlers
// Add listener event for pinch-zoom
var bbScope = this;
var hammer = new Hammer.Manager(this.canvas.upperCanvasEl);
var pinch = new Hammer.Pinch();
hammer.add([pinch]);

hammer.on('pinch', function (ev) {
    // Set the scale and render only if we have a valid pinch (inside the object)
    if (bbScope._validPinch) {
        bbScope.set('scaleX', ev.scale);
        bbScope.set('scaleY', ev.scale);
        bbScope.canvas.renderAll();
    }
});
hammer.on('pinchend', function (ev) {
    bbScope._validPinch = false;
});
hammer.on('pinchcancel', function (ev) {
    bbScope._validPinch = false;
});
hammer.on('pinchstart', function (ev) {
    // Convert mouse coordinates to canvas coordinates
    ev.clientX = ev.center.x;
    ev.clientY = ev.center.y;

    // Check if the pinch was started inside this object
    if (bbScope.canvas) {
        var p = bbScope.canvas.getPointer(ev);
        bbScope._validPinch = bbScope.containsPoint(p);
    }
    else {
        bbScope._validPinch = false;
    }
});

关于javascript - 在 fabric.js 中更改双指缩放灵敏度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45308548/

相关文章:

javascript - 无法通过覆盖来调整 Fabric.js 的大小?

javascript - Fabric.js getObjects() 按标签或类型

javascript - 检索嵌套对象 JavaScript

javascript - 为什么应用相同id的getElementById在用innerHTML修改其parent后返回不同的对象?

javascript - 使用 jquery mobile 和 cordova 无法刷新可折叠 ListView 的标题

ios - addTarget 不适用于 iOS 中的 UIButtons, View 被遮盖

javascript - 如何更新 map Canvas 的谷歌地图改变了它的尺寸?

安卓触摸动画效果

c# - 重量级模式下的 dotnetbrowser 触摸事件未传递给 wpf

javascript - FabricJS 不支持俄语字母