2

在 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”元素的各种方法'似乎不起作用），我也找不到任何方法来使这项工作。

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

如果你使用翻译...

path3.translate(42,42);

...结果与变换相同（可能两者都使用相同的翻译功能）。

使用 Raphaelimage元素，可以通过在or调用中应用不透明度和变换来修复这个损坏的 alphaattranimate。这不适用于路径填充。此外，关闭填充并将其从原始 URL 字符串重置不会消除损坏的 alpha 污染。您可以在此演示中看到这一点。

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

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

4

1 回答 1

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')});

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

如果您正在为变换制作动画，您的选择似乎是：

  • 动画前清除填充，只接受动画发生时没有填充，动画完成后在回调中重新设置
  • 实现您自己的动画处理程序，而不是在每帧之前和之后删除并重新应用填充（当然，这可能会成为性能噩梦）。
于 2014-01-24T11:59:29.867 回答