8

我正在尝试在 HTML 文档中实现一项功能，该功能允许用户在嵌入式 SVG '框'中拖动和放大...

我找到了这个，但很快意识到该脚本仅适用于纯 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 回答