Ariutta の svg-pan-zoom を svg.js で使用しています。Arriuta のネイティブ ダブルクリック機能を無効にして、最終的にパン調整とアニメーションで構成される独自の機能を追加してみました。
通常はこれで問題なく動作しますが、ページをロードすると、ダブルクリック機能がおかしくなることがあります。私のデバッグによると、私のアプリが読み込まれると、私が書いたダブルクリック関数がダブルクリックごとに2回呼び出されることがあるようです。これにより、アニメーションの動作がおかしくなり、この問題がいつ発生するかについての一貫した根拠がないようです。サーバーの再起動が機能する場合と機能しない場合があります。問題が解決するまで、ページをリロードし続ける必要があります。
私の最初の考えは、私のファイルの読み込み順序に何か問題があり、時々、順不同で読み込まれることがあるということです。これについては現在調査中です。私の他の考えは、おそらくこれは svg.js アニメーション ライブラリと関係があるか、または arriuta のプラグインでネイティブのダブルクリック機能を置き換えようとしているということでした。考え?
myApp.service('AnimatorService', function(){
this.dblClickBehavior = function(svgCanvas, zoom){
$('.node').dblclick(function(){
// get pan
pan = zoom.getPan();
// get screen width and height
var sizes = zoom.getSizes();
var centerX = (sizes.width)/2;
var centerY = (sizes.height)/2;
// get center position of svg object double clicked
var x0 = this.instance.first().attr('cx');
var y0 = this.instance.first().attr('cy');
//determine the correct pan value necessary to center the svg
panAdjustX = centerX - x0*sizes.realZoom;
panAdjustY = centerY - y0*sizes.realZoom;
//center the svg object by adjust pan
zoom.pan({'x' :centerX - x0*sizes.realZoom, 'y' : centerY - y0*sizes.realZoom});
//simple animation on the object
this.instance.first().animate().radius(centerX);
});
}
});
正しく動作すると、svg 画像は中央に配置されてから拡大します。正しく動作しないと、中央に配置され、縮小して何もない状態になります。