Raphael-GWT：形状的填充图像（Rect）出现偏移。如何解决这个问题？ [英] Raphael-GWT: fill image of a shape (Rect) appears offset. How to resolve this?

问题描述

我想知道 {Shape} .attr（fill，url（{image.path}））的行为。

将填充图像应用于形状时： $ b

  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）就足够了）。

如何正确定位填充图像？

解决方案

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

I'm wondering about the behavior of {Shape}.attr("fill","url({image.path})").

when applying a fill image to a shape:

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

The background image seem to teal accross the canvas behind the shape, thus gets weird positioning (an illustration snapshot is enclosed - i marked the original image borders in red).

This seem to resolve itself in the presence of an animation along a path (a mere path.M(0,0) is sufficiant).

How can i position the fill-image properly in the first place?

解决方案

The proper way to do this from what I can understand would be to use an SVG pattern declaration to specify the portion and position of the image you would want to use. Then you would use that pattern to fill the rectangle element. Unfortunately, the Raphael javascript library doesn't have support for patterns... so there's no direct way to use an image to fill a rectangle.

这篇关于Raphael-GWT：形状的填充图像（Rect）出现偏移。如何解决这个问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！