CODEWITHSUNDEEP
javascriptraphael
m90
m90

Reputation: 11822

Raphael.js image fill not updating constantly

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

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.

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).

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?

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.

Upvotes: 3

Views: 887

Answers (1)

m90
m90

Reputation: 11822

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 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.

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

Upvotes: 2

Related Questions