logo标签列表

HTML文档中使用鼠标滚轮进行SVG缩放

javascripthtmlsvg
8

我正在尝试在HTML文档中实现一项功能，允许用户在嵌入的SVG“盒子”中拖动和缩放...

我发现了this，但很快就意识到该脚本只能与纯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就会显示出来，但当我用鼠标滚轮滚动时，什么都不会发生...

我完全理解错了吗？

更新

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

2个回答
3

问题已解决！ 显然，onmousewheel属性不能正确地处理事件...至少我必须通过JavaScript直接向SVG画布添加事件监听器才能使其起作用！

-4
通常，使用裸的JavaScript实现这些功能并不是一个好主意。有很多优秀的库可以让你用几行代码实现这个功能，并且可能会有更少的错误可能性。
一个著名的例子是d3。this mashup中的功能似乎就是你想要的。
如果你想为你的应用程序实现类似的功能，你只需要在缩放事件上重新计算变换矩阵。d3可以提供鼠标事件数据，并简化改变属性的过程。查看源代码并尝试一下吧！
解决了！显然onmousewheel属性不能正确处理事件...至少我不得不通过javascript直接向SVG画布添加事件监听器才能使它工作！但还是谢谢关注 ;) - Vlad
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接