8

ユーザーが埋め込まれたSVG「ボックス」をドラッグしてズームできるようにする機能をHTMLドキュメントに実装しようとしています...

私はこれを見つけましたが、すぐにそのスクリプトはプレーンな SVG ファイルでしか機能しないことに気付きました...

私は過去半年間、アセンブリ言語だけを扱ってきたプログラマーであることを覚えておいてください。そこからこの抽象的な環境にジャンプすることは、大きな一歩です。

現在、ズーム部分だけを理解しようとしています：

だから私はこのHTMLファイルを作りました：

<html>
<head>
    <title>Forum Risk! v0.0.1</title>
    <script type="text/javascript" src="svglib.js" ></script>
</head>
<body>
    <!-- SVG embedded directly for example purpose... I'm planning to use <embed> -->
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" onmousewheel="mouseWheelHandler(e);">
        <g id="viewport" transform="matrix(1,0,0,1,200,200)" >
            <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
        </g>
    </svg>
</body>

の内容は次のsvglib.jsとおりです。

var scrollSensitivity = 0.2

function mouseWheelHandler(e) {

    var evt = window.event || e;
    var scroll = evt.detail ? evt.detail * scrollSensitivity : (evt.wheelDelta / 120) * scrollSensitivity;

    var transform = document.getElementById("viewport").getAttribute("transform").replace(/ /g,"");

    var vector = transform.subString(transform.indexOf("("),transform.indexOf(")")).split(",")

    vector[0] = (parseInt(vector[0]) + scroll) + '';
    vector[3] = vector[0];

    document.getElementById("viewport").setAttribute("transform",
        "matrix(".concat(vector.join(), ")"));

    return true;

}

参照用にhttp://www.javascriptkit.com/javatutors/onmousewheel.shtmlを使用しました。

しかし問題は、Chrome で HTML ファイルを開くとすぐに SVG が表示されるのに、マウス ホイールでスクロールしても何も起こらないことです...

このすべてを完全に間違って理解しましたか？

UPD

修正版http://jsfiddle.net/dfsq/GJsbD/

4

2 に答える 2

3

解決しました！どうやらonmousewheel属性はイベントを正しく処理しないようです...少なくとも、それを機能させるには、JavaScriptを介してSVGキャンバスにイベントリスナーを直接追加する必要がありました！

于 2013-02-27T18:58:39.567 に答える
-4

通常、このようなものをそのままの JavaScript で実装するのは良い考えではありません。これを数行で実行できる優れたライブラリがたくさんあり、おそらくエラーの可能性ははるかに少なくなります。

頭に浮かぶ顕著な例はd3です。このマッシュアップの機能は、あなたが望んでいるものとほとんど同じです。

アプリケーションに同様のものを実装したい場合は、基本的に、ズーム イベントで変換行列を再計算するだけで済みます。d3 はマウス イベント データを提供し、属性の変更プロセスを簡素化します。ソースをチェックして、試してみてください！

于 2013-02-25T18:32:29.527 に答える