Skip to content
This repository

Re-using pattern fills #592

Open
wants to merge 1 commit into from

4 participants

Narendran Ranjit Frederik Ring marlonbaeten
Narendran Ranjit

While using patterns (from external images) as a fill, i.e., fill:url(img.gif) the library was always appending new pattern elements to the dom rather than re-using existing ones. This causes a noticeable flicker on some cases while there is a new http request to get the image file.

Try http://forio.com/simulate/latinovote/map on firefox and move the sliders to see the flickering version. If you inspect the dom you can see the new patterns being attend each time the slider moves.

Try http://latinovotemap.org with the fixed version to see that there is no flicker.

Great library btw!

Frederik Ring
m90 commented

:+1: fixed the same problem for me. Thanks!

marlonbaeten

When the offset of the pattern fill matters, this fix introduces the problem that the position (translation) of the pattern is updated for every new elements using the same fill.

+1 for this pull request. here's the patch applied to version 2.1.2 https://gist.github.com/gka/6768991

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Showing 1 unique commit by 1 author.

Jun 02, 2012
Narendran Ranjit Pattern now looks for existing images in the DOM before trying to cre…
…ate new ones
7b04326
This page is out of date. Refresh to see the latest.

Showing 1 changed file with 26 additions and 16 deletions. Show diff stats Hide diff stats

  1. 42  raphael.js
42  raphael.js
@@ -4211,23 +4211,33 @@ window.Raphael.svg && function (R) {
4211 4211
                     case "fill":
4212 4212
                         var isURL = Str(value).match(R._ISURL);
4213 4213
                         if (isURL) {
4214  
-                            el = $("pattern");
4215  
-                            var ig = $("image");
4216  
-                            el.id = R.createUUID();
4217  
-                            $(el, {x: 0, y: 0, patternUnits: "userSpaceOnUse", height: 1, width: 1});
4218  
-                            $(ig, {x: 0, y: 0, "xlink:href": isURL[1]});
4219  
-                            el.appendChild(ig);
  4214
+                            var existingImages = o.paper.defs.getElementsByTagName("image");
  4215
+                            for(var i=0; i< existingImages.length; i++){
  4216
+                               if(existingImages[i].href.baseVal === isURL[1]){
  4217
+                                 el = existingImages[i].parentNode;
  4218
+                               }
  4219
+                            }
  4220
+                            if(!el){
  4221
+                                el = $("pattern");
  4222
+                                var ig = $("image");
  4223
+                                el.id = R.createUUID();
  4224
+                                $(el, {x: 0, y: 0, patternUnits: "userSpaceOnUse", height: 1, width: 1});
  4225
+                                $(ig, {x: 0, y: 0, "xlink:href": isURL[1]});
  4226
+                                el.appendChild(ig);
4220 4227
 
4221  
-                            (function (el) {
4222  
-                                R._preload(isURL[1], function () {
4223  
-                                    var w = this.offsetWidth,
4224  
-                                        h = this.offsetHeight;
4225  
-                                    $(el, {width: w, height: h});
4226  
-                                    $(ig, {width: w, height: h});
4227  
-                                    o.paper.safari();
4228  
-                                });
4229  
-                            })(el);
4230  
-                            o.paper.defs.appendChild(el);
  4228
+                                (function (el) {
  4229
+                                    R._preload(isURL[1], function () {
  4230
+                                        var w = this.offsetWidth,
  4231
+                                            h = this.offsetHeight;
  4232
+                                        $(el, {width: w, height: h});
  4233
+                                        $(ig, {width: w, height: h});
  4234
+                                        o.paper.safari();
  4235
+                                    });
  4236
+                                })(el);
  4237
+
  4238
+                                o.paper.defs.appendChild(el);
  4239
+                            }
  4240
+           
4231 4241
                             $(node, {fill: "url(#" + el.id + ")"});
4232 4242
                             o.pattern = el;
4233 4243
                             o.pattern && updatePosition(o);
Commit_comment_tip

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.