javascript - 拉斐尔，用图像填充背景 (fillfit)-6ren

javascript - 拉斐尔，用图像填充背景 (fillfit)

转载作者：行者123 更新时间：2023-11-30 18:00:25

我一直在努力解决以下问题。

我有一个元素，我想用一张图片填充它。 Raphael 在其默认设置下使用图案，从而重复图像。

我找到了 http://xn--dahlstrm-t4a.net/svg/raphaeljs/fill-shape-with-image.html ，应该完成任务，但同样的问题仍然存在。

知道如何调整代码，使您可以将一张图片从左上角设置到右下角吗？

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;

你的海基

最佳答案

可以找到此解决方案的基础 here .我真的很想将它合并到我正在使用的网站中，但我不想使用非标准版本的 Raphael，而且我祈祷它看起来也不是个好主意，希望从事 Raphael 工作的人们将采用 Dahlström 提出的解决方案.

这个例子本身就是完整的功能。

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