Преместване на пътя на Raphael с png изображение за запълване, без да се нарушава изображението в IE или движещо се изображение спрямо елемент?

Има три основни начина за преместване на пътека в Raphael.

Ако този път има изображение за запълване с 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);

... резултатите са същите като transform (вероятно и двете използват едни и същи функции за превод).

С Raphael image елементи е възможно да коригирате тази счупена алфа чрез прилагане на непрозрачност с трансформацията в attr или animate повикване. Това не работи с попълване на пътеки. Освен това изключването на запълването и нулирането му от оригиналния URL низ не премахва повреденото алфа замърсяване. Можете да видите това в тази демонстрация.

И така, търся начин да преместя Raphael траектория, която има фоново изображение с PNG прозрачност, което а) запазва изображението спрямо елемента, последователно и б) не разваля PNG прозрачност в IE8 чрез превръщане на частичната прозрачност в пикселизирано черно.

Подобни проблеми възникват при всяка форма на трансформация - като мащабиране, завъртане и т.н.


svg opacity raphael internet-explorer-8 vml
person user56reinstatemonica8    schedule 07.08.2013    source източник

Отговори (1)


arrow_upward
1
arrow_downward

Не мога да намеря добър отговор на това: най-близкото, което намерих, е грозно, но функционално решение за 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')});

Решаващото нещо изглежда е: запълването не трябва да се прилага, когато се случи трансформацията, в противен случай ще бъде съсипано завинаги, дори ако го премахнете и приложите отново. Внимавайте с времето за това - не трябва да е възможно запълването да се приложи отново, преди трансформацията да завърши (напр. внимавайте за условия на състезание с анимации или други асинхронни процеси).

Ако анимирате трансформация, вашите възможности изглежда са:

  • Изчистете запълването преди анимацията, просто приемете, че няма да има запълване, докато анимацията се изпълнява, и задайте отново обратно извикване, след като анимацията завърши
  • Внедрете свой собствен манипулатор на анимация, който премахва и прилага отново запълването преди и след всеки кадър (това, разбира се, рискува да се окаже кошмар за производителността).
person user56reinstatemonica8    schedule 24.01.2014