Raphael.js图片填充不经常更新

时间:2021-06-11 23:39:56

I do have a Paper.path() in Raphael that is filled with a simple texture:

我在Raphael中有一个Paper.path(),它充满了简单的纹理:

var fill = screen.path(Iso.topFacePath(top)).attr({
  fill: 'url(http://www.example.com/mytexture.jpg)',
});

The path can be altered by the user via drag and drop. For this I use Element.drag() to bind the handlers.

用户可以通过拖放来改变路径。为此,我使用Element.drag()来绑定处理程序。

The problem that I encouter now is that while the onmove-handler function is called the element in question will be recalculated and has to be drawn again. Apparently this is "too much" for raphael and the fill pattern will disappear randomly (flicker) and appear again some time later (at latest onend).

我现在遇到的问题是,当调用onmove-handler函数时,将重新计算有问题的元素,并且必须再次绘制。显然这对于​​raphael来说“太多”并且填充图案将随机消失(闪烁)并且稍后再次出现(最近一次)。

The actual code I use is a little too much to post here but I built a fiddle where you can see what's going on (you can drag the upper sides of the quadrangle).

我使用的实际代码有点太多了,不能在这里发布,但我建立了一个小提琴,你可以看到正在发生的事情(你可以拖动四边形的上边)。

Is there a simple fix to this?

有一个简单的解决方案吗?

I am used to canvas much more than raphael (actually this is the first time I really use raphael) so maybe my approach of redrawing everything everytime sth changes is plain wrong?

我习惯画布比raphael更多(实际上这是我第一次真正使用raphael)所以也许我每次重新绘制所有内容的方法都是错误的?

EDIT: I just found out that seems to be somehow browser-related as well. Chrome and Firefox will produce the flicker where Safari seems to do everything just fine.

编辑:我刚刚发现,似乎在某种程度上与浏览器相关。 Chrome和Firefox会产生闪烁,Safari似乎做得很好。

1 个解决方案

#1


2  

This seems to be caching issue (raphael.js does not cache the bitmap fill and will reload it on every change) and is fixed (for me) by this pull request on GitHub that is (as of 08/14/2012) still pending.

这似乎是缓存问题(raphael.js没有缓存位图填充并将在每次更改时重新加载)并且在GitHub上的这个拉取请求(对于我来说)是固定的(截至2012年8月14日)仍然未决。

Raphael is pretty hard / impossible to build oneself as the make file points to local and/or inexistent files, but you can either concatenate everything by hand, modify the build script or use the modified build that is used in the example to get hold of the fix.

Raphael很难/不可能构建自己,因为make文件指向本地和/或不存在的文件,但您可以手动连接所有内容,修改构建脚本或使用示例中使用的修改后的构建来获取修复。

Let's hope it will find its way into a future release of Raphael.

让我们希望它能够进入拉斐尔的未来版本。

#1


2  

This seems to be caching issue (raphael.js does not cache the bitmap fill and will reload it on every change) and is fixed (for me) by this pull request on GitHub that is (as of 08/14/2012) still pending.

这似乎是缓存问题(raphael.js没有缓存位图填充并将在每次更改时重新加载)并且在GitHub上的这个拉取请求(对于我来说)是固定的(截至2012年8月14日)仍然未决。

Raphael is pretty hard / impossible to build oneself as the make file points to local and/or inexistent files, but you can either concatenate everything by hand, modify the build script or use the modified build that is used in the example to get hold of the fix.

Raphael很难/不可能构建自己,因为make文件指向本地和/或不存在的文件,但您可以手动连接所有内容,修改构建脚本或使用示例中使用的修改后的构建来获取修复。

Let's hope it will find its way into a future release of Raphael.

让我们希望它能够进入拉斐尔的未来版本。