在raphael纸中拖放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 drag完成了拖动操作非常简单）。删除列表之后，我想渲染对象获取json字符串（我已经完成了）。

但问题是我无法找到raphael纸上的确切落点。我也在使用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};
                }