Raphael-GWT：填充图像的形状（Rect）出现偏移。怎么解决这个？

Question

我想知道{Shape}.attr("fill","url({image.path})")的行为。

将填充图像应用于形状时

：

public class AppMapCanvas extends Raphael {

    public AppMapCanvas(int width, int height) {
        super(width, height);
        this.hCenter = width / 2;
        this.vCenter = height / 2;
        ...
        Rect rect = this.new Rect(hCenter, vCenter, 144, 40, 4);
        rect.attr("fill", "url('../images/app-module-1-bg.png')"); // <--
        ...
    }
}

背景图像似乎在形状后面的画布上呈现青色，因此会产生奇怪的定位（插图快照被封闭 - 我将原始图像边框标记为红色）。

这似乎可以在路径上出现动画时自行解决（仅仅path.M(0,0)就足够了）。

如何才能正确定位填充图像？

Answer 1

根据我的理解，这样做的正确方法是使用SVG模式声明来指定您想要使用的图像的部分和位置。然后，您将使用该模式填充矩形元素。不幸的是，Raphael javascript库不支持模式...所以没有直接的方法来使用图像来填充矩形。