使用 png 填充图像移动 Raphael 路径，而不破坏 IE 中的图像或相对于元素移动图像？

Posted 2023-03-06

【中文标题】使用 png 填充图像移动 Raphael 路径，而不破坏 IE 中的图像或相对于元素移动图像？

【英文标题】：Move Raphael path with png fill image, without breaking image in IE or moving image relative to element?

【发布时间】：2013-08-09 01:32:19

【问题描述】：

在 Raphael 中有三种基本的路径移动方式。

如果该路径有一个具有 PNG 透明度的填充图像，并且您需要 IE8 (VML)，那么这三个都是有缺陷的。

JSBin demo

---

如果你使用简单的变换...

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

...然后在IE8中，填充中的png透明度中断，半透明像素变黑。边缘变得像素化和丑陋，并且根据图像的不同，您可能会在图像的半透明边缘周围出现磨损的黑色轮廓。不好，而且在事件发生后似乎没有任何可靠的方法来解决这个问题。

有时，不一致的是，背景图像也不会相对于元素保持不变（更多内容见下文）。

---

如果为路径属性设置动画，例如这样：

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

...IE8 不会破坏图像背景。但是，fix for making background images relative to the element not the paper 不适用于此方法（并且我尝试使用改进的背景图像偏移和额外的“M-20，-20”元素来阻止它的各种方法似乎不起作用），我也找不到任何方法使 工作。

此外，在旅途中进行大量转换可能会破坏 VML 模式下背景图像修复依赖的微妙 IE8 错误，从而导致背景移动。这似乎与上面的 JSBin 不一致，在 IE8 中，有时它们都移动，有时只移动顶部的一个。

---

如果你使用翻译...

path3.translate(42,42);

...结果与变换相同（大概都使用相同的翻译函数）。

---

使用 Raphael image 元素，可以使用 fix this broken alpha by applying opacity with the transform in an attr or animate call。这不适用于路径填充。此外，关闭填充并将其从原始 URL 字符串重置不会消除损坏的 alpha 污染。你可以看到这个in this demo。

---

所以，我正在寻找一种方法来移动 Raphael 路径，该路径的背景图像具有 PNG 透明度，a) 始终保持图像相对于元素，b) 不t 通过将部分透明度变为像素化黑色来破坏 IE8 中的 PNG 透明度。

---

任何形式的变换都会出现类似的问题 - 例如缩放、旋转等。

【参考方案1】：

我找不到任何好的答案：我发现的最接近的是 IE8 transform 的一个丑陋但实用的解决方法（包装在 if(Raphael.type=='VML')s 中，所以你不会破坏真正的浏览器的东西）：

在对任何具有 alpha 透明度 PNG / 图案填充的内容进行任何转换之前

，请移除图案填充 (path.attr(fill:'none');)，并将填充设置存储为 path.data('fill',path.attr('fill'));

转换后，异步

（例如，包裹在setTimeout(function() ) 中）重新应用填充，例如path.attr(fill: path.data('fill'));

关键的事情似乎是：在变换发生时不能应用填充，否则它会永远被破坏，即使你删除并重新应用它也是如此。请注意这方面的时间 - 在转换完成之前不能重新应用填充（例如，注意动画或其他异步进程的竞争条件）。

---

如果您要为变换设置动画，您的选择似乎是：

在动画之前清除填充，只接受在动画发生时不会有填充，并在动画完成后在回调中重新设置 实现您自己的动画处理程序，而不是在每一帧之前和之后移除并重新应用填充（当然，这有可能成为性能噩梦）。