Question

我使用带有SVG图像的注释创建了一个示例。

我在SVG的某个位置放置了一个注释。对于平移和缩放，我使用svg pan zoom库

要初始化SVG平移缩放，我使用了：

.filteredArrayUsingPredicate

和HTML：

svgPanZoom("#panzoom svg", {
        panEnabled: true,
         controlIconsEnabled: false,
         zoomEnabled: true,
         dblClickZoomEnabled: true,
         mouseWheelZoomEnabled: true,
         zoomScaleSensitivity: 0.2,
         minZoom: 0.2,
         maxZoom: 20,
         fit: true,
         contain: true,
         center: true,
         refreshRate: 'auto',
         onPan: function(ev) {
             console.log(ev);
           $(".annotation").css("transform", "translate(" + ev.x + "px," + ev.y + "px)");
        }
    });

对于拖动注释，我使用jQuery UI draggable：

<div id="panzoom" style="text-align: center">
        <svg version="1.1" baseProfile="basic" id="svg2" xmlns:svg="http://www.w3.org/2000/svg"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="900px" height="900px"
     viewBox="0 0 900 900" xml:space="preserve">
...

</svg>
</div>

查看完整的小提琴：http://jsfiddle.net/y5nzqudz/

问题是当我平移SVG之后我想移动注释然后以某种方式移动光标和黄色块意外...

我看到jQuery UI draggable使用top和left位置，而svg pan zoom使用translate css。

你能建议我如何解决它吗？

使用带有jquery draggable的CSS translate转换

0 个答案: