Градиентная заливка не отображается должным образом при переводе элемента - PullRequest
Новая
       11

Градиентная заливка не отображается должным образом при переводе элемента

1 голос
/ 12 января 2012

Я получаю странное поведение, когда я перевожу элемент Рафаэля и изменяю градиент заполнения в конце перевода (как это можно сделать, чтобы показать, что объект выбран). Если объект просто «щелкнул» (без перемещения или перемещения), изменение градиента работает нормально. Когда объект переводится, градиент выглядит неправильно.

Проблема может быть замечена в этом коде: 

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/

  • Перетащите коробку вниз, и она станет в основном серой
  • Перезапустите скрипт, щелкните по полю, и он укажет правильный градиент
  • Перезагрузите, перетащите коробку вверх и он становится красным

Так ли это должно работать (возможно, градиент применяется к более широкой области)? Если так, как я могу получить градиент для отображения при перетаскивании элемента?

1 Ответ

0 голосов
/ 12 января 2012

Я сузил еще немного: http://jsfiddle.net/Lr5fz/16/

Проблема возникает, когда вы вызываете translate затем attr. По некоторым причинам инвертированный перевод применяется к gradientTransform элемента lineargradient.

Для дальнейшего поиска ошибок начните с исходных строк 722-839: https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.svg.js

...