0

まず、svg-pan-zoom を開発し、維持するのを手伝ってくれた人に感謝します。本当に役に立ちました。大きな小道具:)

とにかく、svg-pan-zoom コミュニティに簡単な質問があります。内部に HTML div がある (foreignObject の内部にある) svg で svg-pan-zoom を使用することはまったく可能ですか?

この svg がパンおよびズームされているときに、この svg の動きを「たどる」には、HTML 要素 (具体的にはフォーム) が必要です。SVG 要素に対する相対的な位置は変更されるべきではなく、それらと共に移動する必要があります。

私はそれを完全に個別に実行しようとしましたが (HTML フォームのパンを制御する別のコード)、非常にギミックが多く、対処したくない技術的な問題に遭遇しました。(たとえば、div を移動しても、svg は一緒に移動しません。) svg-pan-zoom がforeignObjects をサポートしているかどうか、および HTML 要素を svg で移動するにはどうすればよいかを誰かが教えてくれれば、本当にありがたいです。

前もって感謝します。

4

1 に答える 1

0

フォローアップするために、デフォルトのズームとパンのオプションを無効にして、svg とフォーム要素の両方をパンする関数を作成して、それらが一緒に移動するようにしました。

(このコードの一部は、別の Stack Exchange の回答に触発されたもので、簡単に調べたところ見つかりませんでした。覚えていれば後で参照します。)

ほとんどのソリューションと同様に、この方法で問題を解決すると、さらに多くの問題が発生しました。たとえば、フォームはマウスで完全に動き回りますが、なんらかの理由で関数 panBy(xpixel, ypixel) がパンしすぎます (マウスを少し動かすだけでページから飛び出してしまいます)。

その問題はありますが、これが私の解決策だと思います。私はこれに長い間立ち往生していましたが、panByが奇妙な動作をしている理由を理解するのを手伝ってくれる人がたくさんいることを感謝します.

// Pan when mouse is dragged
$(window).on('mousedown', function(event){
    var initClick = {
        x : event.pageX,
        y : event.pageY
    };
    var initPosition = $('#form1').offset();
    var handlers = {
        mousemove : function(event){
            panZoom.panBy({x: event.pageX - initClick.x, y: event.pageY - initClick.y});
            $('#form1').css({"top": initPosition.top + (event.pageY - initClick.y),
                            "left": initPosition.left + (event.pageX - initClick.x)});
        },
        mouseup : function(event){
            $(this).off(handlers);   
        }
    };
    $(document).on(handlers);
});
于 2016-01-09T02:22:03.997 に答える