javascript - 拉斐尔的拖放和翻译问题

Question

我试图让我的一个组件与另一个组件对接，但在拖动行为结束后似乎有些东西丢失了。转到下面的 JSFiddle，将 svg 光标放在靠近顶部的位置，然后单击左侧的组件。现在将 svg 光标稍微向下放置并创建另一个组件。现在将底部的一个拖到顶部的一个(从下面开始，代码尚不适合从上面开始)并放下它。在“向上”拖动处理程序中，我的代码似乎应用了相对于组件创建位置的平移，而不是相对于组件放置位置的平移。我不明白为什么:(请帮忙。

打开控制台看看我的意思，我在那里打印一些有用的信息和对象坐标。

这是 JSFiddle: http://jsfiddle.net/n4rzul/trqrknqj/

这是传递给 raphael svg 对象的整个拖动函数:

this.drag = function() {
            return {

                start:function () {
                    this.position = 0;
                    this.toFront();
                    this.lastdx ? this.odx += this.lastdx : this.odx = 0;
                    this.lastdy ? this.ody += this.lastdy : this.ody = 0;
                    this.animate({"fill-opacity": 0.5}, 500);
                    this.previousStroke = this.attr('stroke');
                }, 

                move:function (dx, dy) {
                    var draggedShape = this;
                    this.transform("t"+(dx+this.odx)+","+(dy+this.ody));
                    this.lastdx = dx;
                    this.lastdy = dy;
                },

                up: function(){
                    this.animate({"fill-opacity": 1}, 500);
                    var target;
                    for(i = 0; i < shapes.length; i++) {
                        if(shapes[i] != this) {
                            target = shapes[i];
                            console.log("found");
                            break;
                        }
                    }
                    console.log("targetXY: " + target.getBBox().x + ", " + target.getBBox().y);
                    console.log("draggedXY: " + this.getBBox().x + ", " + this.getBBox().y);
                    var tX = target.getBBox().x - this.getBBox().x;
                    var tY = target.getBBox().y - this.getBBox().y;
                    console.log("translate XY to get from dragged to target: " + tX + ", " + tY);
                    this.transform("t"+(tX)+","+(tY));

                    console.log("but it moves relative to its original XY. Why??: " + this.getBBox().x + ", " +this.getBBox().y);
                }

         };
        }

Answer 1

原始代码的主要问题是，在放置最终变换(在鼠标松开时)时，不考虑拖动变换的对象。

最简单的快速修复可能是在转换中添加 3 个点“...”，例如

this.transform("...t"+(tX)+","+(tY +30));

这意味着翻译时要考虑到之前的转换。

这是一个fiddle显示此运行。

但是，一般代码感觉也可以简化，就像 fiddle here 中那样。 .

逻辑似乎是拖动对象，然后计算对象的位置并计算拖动的差值。但是，如果您已经知道想要连接的对象，您就知道它的变换，那么拖动的对象在哪里实际上并不重要。它始终会位于目标对象旁边，因此实际上不需要计算。如果这只是需要使用原始代码的更大问题的一部分，那么这可能不太正确。

我个人会坚持一条本质上克隆或相同的路径(因此所有路径都具有相同的起始x，y)，但是这有点个人品味，并且取决于您以后可能遇到的其他问题。进行变换并将变换压平到路径本身可能不是最佳选择。

一般来说，有一些关于变换的内容，我会首先阅读这些内容，然后一旦理解了 SVG 变换(如果还没有)，然后再看看 Raphael 变换字符串。

主要的拉斐尔变换字符串信息可以在 here 找到