CODEWITHSUNDEEP
javascriptimagedesign-patternscanvasraphael
Heikki Mustonen
Heikki Mustonen

Reputation: 311

Raphael, filling background with image (fillfit)

I've been struggling with the following problem.

I have an element, which I'd like to fill with one image. Raphael is using pattern by its default settings, thus repeating the image.

I found http://xn--dahlstrm-t4a.net/svg/raphaeljs/fill-shape-with-image.html, which should do the task, but the same problem persists.

Any idea how to tweak the code such a way that you could set one image from upper left-corner to bottom right-corner?

repeating background

    case "fillfit":
        var isURL = Str(value).match(R._ISURL);
        if (isURL) {
            el = $("pattern");
            var ig = $("image");
            console.log('R', R);
            el.id = R.createUUID();
            $(el, {x: 0, y: 0, height: 1, width: 1, "patternContentUnits": "objectBoundingBox"});
            $(ig, {x: 0, y: 0, width: 1, height: 1, "preserveAspectRatio": "none", "xlink:href": isURL[1]});

            el.appendChild(ig);
            o.paper.defs.appendChild(el);
            $(node, {fill: "url(#" + el.id + ")"});
            o.pattern = el;
            o.pattern && updatePosition(o);
        }
        break;

Yours Heikki

Upvotes: 1

Views: 3900

Answers (1)

Matt Bowman
Matt Bowman

Reputation: 112

The basis for this solution can be found here. I really wanted to incorporate this into a site I'm working on, but I didn't want to use a non-standard version of Raphael, and it also didn't seem like a good idea to cross my fingers and hope that the folks working on Raphael would incorporate the solution proposed by Dahlström.

This example is fully functional on its own.

    <html>
    <head>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
        <script>
            $(function() {
                var paper = Raphael(document.getElementById("paper"), 100, 100);
                var circle = paper.circle(50, 50, 50);
                var uuid = Raphael.createUUID();
                var pattern = document.createElementNS("http://www.w3.org/2000/svg", "pattern");
                var backgroundImage = paper.image("https://si0.twimg.com/profile_images/916160956/thumbnail_10502_bigger.jpg", 0, 0, 1, 1);
                pattern.setAttribute("id", uuid);
                pattern.setAttribute("x", 0);
                pattern.setAttribute("y", 0);
                pattern.setAttribute("height", 1);
                pattern.setAttribute("width", 1);
                pattern.setAttribute("patternContentUnits", "objectBoundingBox");

                $(backgroundImage.node).appendTo(pattern);

                $(pattern).appendTo(paper.defs);
                $(circle.node).attr("fill", "url(#" + pattern.id + ")");
            });
        </script>
    </head>
    <body>
        <div id="paper"></div>
    </body>
</html>

Upvotes: 2

Related Questions