2017-07-25 75 views
1

私は、タッチサポート付きのカスタムビルドfabric.jsを持っています。これで、ピンチズームジェスチャで任意のオブジェクトを拡大縮小できます。問題はズームが本当に敏感で、私はほとんど指を動かすことができず、オブジェクトは非常にスケーリングされています。fabric.jsのピンチズーム感度を変更します

感度をどのように変更することができるかについて、ドキュメントで多くの情報を見つけることができませんでした。私はEvent.jsfabric.jsのタッチイベントを処理するために使われていることを知っています。この感度を変える方法はありますか?

+0

はどのようにあなたが説明してください可能性がファブリック内のピンチズームを有効になかったか、あなたのコードを共有してください可能性が...私はアプリケーション – Gopinath

+0

@Vickyスマートを開発していた私はジェスチャーを検出するために 'hammer.js'を使用して終了しました手動でスケーリングを適用します。 – Andres

+0

Andres私はhammerjsとquojsを試しましたが、サンプルコードを教えてください。だから私は考えを取得し、物事を働かせることができます – Gopinath

答えて

2

私はタッチコントロールを自分で実装しました。これは私が作ったコードです。このコードは、私のカスタム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; 
    } 
}); 
関連する問題