Question

当我翻译raphael元素并在翻译结束时更改填充渐变时，我会遇到奇怪的行为（就像可能会显示选中对象一样）。如果只是“单击”对象（没有平移或拖动），则渐变更改正常。翻译对象时，渐变看起来不正确。

这个问题可以在这段代码中看到：

var paper = Raphael('page', '100%', '100%');
var blocks = paper.set();

var base = {"fill": "90-#aaa:5-#fff:95"}    
var selected = {"fill": "90-#a99:5-#faa:95"}    

var r = paper.rect(10 + 200, 10, 100, 50, 10).attr(base);

r.drag(
    function(dx, dy) {
        this.translate(dx-this.ox,dy-this.oy);

        this.ox = dx;
        this.oy = dy;
    },
    function(x, y) {
        this.ox = 0;
        this.oy = 0;      
    },
    function() {
        r.attr(selected);
    }
);

jsfiddle http://jsfiddle.net/gnarlybear/Lr5fz/

向下拖动框，它变成灰色
重新启动脚本，单击框，渐变似乎正确
重新启动，向上拖动框它变红了

它是如何工作的（可能是渐变被应用于更广泛的区域）？如果是这样，我怎样才能在拖动元素时显示渐变？

Answer 1

我将其缩小了一些：http://jsfiddle.net/Lr5fz/16/

当您调用translate然后调用attr时会出现问题。出于某种原因，反转换应用于gradientTransform元素上的lineargradient。

要在源代码行722-839开始进一步的bugtracing：https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.svg.js

在翻译元素时，渐变填充不会按预期显示

1 个答案: