javascript - 在 raphael paper 中拖放 dom 元素

Question

我在 svg 中工作，并使用 Raphael js 在 svg 中创建动态对象。现在我想知道是否可以将一些预定义的形状从 html 列表拖放到 svg 中。

详情:

我有一些预定义的形状存储在边栏中列出的数据库表中。每个形状都有自己的 json 字符串，这是我使用 Raphaël.JSON ( https://github.com/ElbertF/Raphael.JSON#rapha%C3%ABljson-and-rapha%C3%ABlfreetransform ) 完成的。

在另一边我有一个 raphael 生成的 svg。

现在我想将每个预定义的形状拖到 raphael svg/paper 中。 (我已经完成了使用 jquery ui 拖动非常容易的拖动)。删除列表后，我想渲染获取 json 字符串的对象(我已经完成了)。

但问题是我无法找到拉斐尔纸上的确切落点。我也在使用 panZoom 进行缩放和平移。我想要纸张缩小和放大时的一致性。

屏幕截图:

拖动的对象是图片，不是svg。

非常感谢您的帮助，并在此先致谢。

Answer 1

几天后，我使用简单的 javascript 和 svg 向用户提供了“拖放”功能。其中我给出了一个函数，它可以确定鼠标指针的确切位置，而不管平移或缩放。看看它，看看它是否对你有用。 (我不知道它在 rapheal 中是如何工作的)

 var mainsvg = document.getElementsByTagName('svg')[0];
 function mouseup(event) {
        var svgXY = getSvgCordinates(event);// get current x,y w.r.t to your svg.
    }
        function getSvgCordinates(event) {
                    var m = mainsvg.getScreenCTM();
                    var p = mainsvg.createSVGPoint();
                    var x, y;

                    x = event.pageX;
                    y = event.pageY;

                    p.x = x;
                    p.y = y;
                    p = p.matrixTransform(m.inverse());

                    x = p.x;
                    y = p.y;

                    x = parseFloat(x.toFixed(3));
                    y = parseFloat(y.toFixed(3));

                    return {x: x, y: y};
                }