在fabric.js中更改捏缩放灵敏度

时间:2017-07-25 16:10:38

标签: javascript touch fabricjs

我有一个带触摸支持的自定义内置fabric.js捆绑包。现在我可以使用双指缩放手势缩放任何对象。问题是变焦真的很敏感,我几乎没有移动手指,而且物体的尺寸非常大。

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

1 个答案:

答案 0 :(得分:2)

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

////////////////////////////// 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;
    }
});