拖放和翻译的拉斐尔问题

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找到