【问题标题】:Change pinch-zoom sensitivity in fabric.js更改 fabric.js 中的捏缩放灵敏度
【发布时间】:2017-11-07 11:10:43
【问题描述】:

我有一个定制的fabric.js 捆绑包,支持触摸。现在我可以用捏缩放手势缩放任何对象。问题是缩放真的很灵敏,我几乎没有动手指,而且对象被放大了。

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

【问题讨论】:

  • 您是如何在织物中启用捏合缩放的,请您解释一下或分享您的代码...我正在开发应用程序
  • @Vicky Smart 我最终使用hammer.js 来检测元素上的手势并手动应用缩放。
  • Andres 我已经尝试过使用hammerjs 和quojs,但不知道您能给我示例代码吗?所以我可以得到想法并让事情顺利进行
  • @VickySmart 看看我的回答

标签: javascript touch fabricjs


【解决方案1】:

好的,我最终自己实现了触摸控制,这是我编写的代码。此代码放置在我的自定义 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;
    }
});

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2015-04-25
    • 2017-09-23
    • 1970-01-01
    • 1970-01-01
    • 2020-04-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多