Переместить путь Рафаэля с png заливкой изображения, не ломая изображение в IE или движущееся изображение относительно элемента?

Question

Есть три основных способа двигаться по пути в Рафаэле.

Если этот путь имеет изображение заливки с прозрачностью PNG, и вам нужен IE8 (VML), все три имеют недостатки.

JSBin демо

---

Если вы используете простое преобразование...

path1.animate({transform: 't20,100'},1000);

... затем в IE8 прозрачность png в разрывах заливки и полупрозрачные пиксели становятся черными. Края становятся неровными и некрасивыми, и в зависимости от изображения вы можете получить потертый черный контур вокруг полупрозрачного края изображения. Не хорошо, и, кажется, нет надежного способа исправить это после события.

Иногда непоследовательно фоновое изображение также не остается относительно элемента (подробнее об этом ниже).

---

Если вы анимируете атрибут пути, например, так:

path2.animate({path: Raphael.transformPath( path2.attr('path'), 't100,20') },1000);

... IE8 не разрушает фоновое изображение. Однако исправление для создания фоновых изображений относительно элемента, а не бумаги, не работает с этим методом (и я пытался связать его различными способами, используя улучшенное смещение фонового изображения с дополнительным элементом "M-20,-20". Кажется, не работает), и я не могу найти способ сделать эту работу тоже.

Кроме того, наличие большого количества преобразований на ходу может устранить деликатную ошибку IE8, от которой зависит исправление фонового изображения в режиме VML, что приводит к движению фона. Это кажется несовместимым - с JSBin выше, в IE8, иногда они все перемещаются, иногда только верхний.

---

Если вы используете перевод...

path3.translate(42,42);

... результаты такие же, как и у преобразования (предположительно оба используют одинаковые функции перевода).

---

С Рафаэлем image элементы, можно исправить эту сломанную альфу, применяя непрозрачность с преобразованием в attr или же animate звоните. Это не работает с заполнением пути. Кроме того, отключение заливки и сброс ее из исходной строки URL-адреса не устраняет разорванное альфа-загрязнение. Вы можете увидеть это в этой демонстрации.

---

Итак, я ищу способ переместить путь Рафаэля с фоновым изображением с прозрачностью PNG, который а) сохраняет изображение относительно элемента последовательно и б) не разрушает прозрачность PNG в IE8, поворачивая частичное прозрачность в точечный черный.

---

Подобные проблемы возникают с любой формой преобразования - например, масштабирование, поворот и т. Д.

Answer 1

Я не могу найти хорошего ответа на этот вопрос: самый близкий я нашел уродливый, но функциональный обходной путь для IE8 transform (завернут в if(Raphael.type=='VML')s, чтобы вы не испортили вещи для настоящих браузеров):

• Перед выполнением любого преобразования чего-либо, имеющего альфа-прозрачность PNG / заливку шаблона, удалите заливку шаблона (path.attr({fill:'none'});), сохраняя настройку заполнения как path.data('fill',path.attr('fill'));
• После преобразования асинхронно (например, завернутый в setTimeout(function(){ })) повторно применить заливку, например path.attr({fill: path.data('fill')});

Кажется, самое важное: заливка не должна применяться, когда происходит преобразование, иначе она будет разрушена навсегда, даже если вы удалите и повторно примените ее. Будьте осторожны с выбором времени - не должно быть возможности повторного применения заливки до завершения преобразования (например, следите за условиями гонки с анимацией или другими асинхронными процессами).

---

Если вы анимируете преобразование, вы можете выбрать один из следующих вариантов:

• Очистите заливку перед анимацией, просто примите, что во время анимации заливка не будет, и переустановите функцию обратного вызова после завершения анимации.
• Реализуйте свой собственный обработчик анимации, который удаляет и повторно применяет заливку до и после каждого кадра (это, конечно, может стать кошмаром производительности).