Question

我将首先展示我的小提琴。这会让我的问题变得清晰： http://jsfiddle.net/fnwcu2yu/

paper=Raphael(0, 30, 500, 500)
    handle=[]
    all=paper.set()
    for(i=0;i<5;i++) {
        handle[i]=paper.circle(Math.floor(Math.random() * 200),Math.floor(Math.random() * 200)+40,5)
        //keeps starting position on dragStart
        handle[i].sx = 0
        handle[i].sy = 0
        //keeps total translation throughout
        handle[i].tx = 0
        handle[i].ty = 0
        all.push(handle[i])

    }
    all.attr("fill","black")
     all.sx = 0
     all.sy = 0


    all.drag(
            function (dx, dy) {
                this.tx = this.sx + dx
                this.ty = this.sy + dy
                this.transform(["t", this.tx, this.ty])
                },
            function () {
                this.sx = this.tx
                this.sy = this.ty
                },
            function () { }
                )

    moveRight = function() {
        changeX=20
        changeY=0
        all.sx=all.sx+changeX
        all.sx=all.sx+changeY
        all.transform(["T", all.sx, all.sy])


    }

我创建了5个圆圈。他们每个人都是可以拖延的。您可以单独拖动每个圆圈。

另外，我创建了一个名为'all'的集合。将变换应用于集合时，它会影响其所有子项。到目前为止，非常好。

我创建了一个按钮，将整个集合向右翻译20个像素。

问题1：如果我没有移动任何圆圈，它可以正常工作，但如果我移动一个圆圈然后按下按钮，它会向右移动20像素它原来的位置而不是当前的位置。

问题2：一旦我进行了设置翻译并尝试拖动一个圆圈，它也会跳转到原始位置（翻译前）并从那里开始移动。

我找到了解决问题2的（可能）坏方法，但我猜这不是它应该如何工作的。

在第二小提琴中看到解决方案 http://jsfiddle.net/fnwcu2yu/1/

我有两个问题的解决方案，但这是一个骗子。我几乎可以肯定拉斐尔有更好的机制来处理这类事情。

我最终做的不是翻译集合，而是逐个翻译它中的各个对象。

moveRight = function() {
            changeX=20
            changeY=0

            for(i=0;i<handle.length;i++) {
            handle[i].tx=handle[i].tx+changeX
            handle[i].ty=handle[i].ty+changeY
            handle[i].transform(["T", handle[i].tx, handle[i].ty])
            }

看到解决（黑客）小提琴： http://jsfiddle.net/fnwcu2yu/2/

我错了吗？

谢谢大家！

如何翻译一个集合，以便在RaphaelJS中更新其子节点，反之亦然？

0 个答案: