Javascript 在raphael.js中缩放填充图案_Javascript_Design Patterns_Scale_Raphael_Fill

Javascript 在raphael.js中缩放填充图案

javascript design-patterns

Javascript 在raphael.js中缩放填充图案,javascript,design-patterns,scale,raphael,fill,Javascript,Design Patterns,Scale,Raphael,Fill,我的问题是，填充不是用svg画布缩放的，因此按比例，它的大小是路径缩放之前的两倍。是否有任何简单的方法可以将填充模式与svg的其余部分一起缩放？注意，可以仅使用raphael库的函数来完成此操作在raphael对象上应用scale函数时，它会创建一个新的svg节点，坐标已缩放，但遗憾的是，它不会修改填充属性无论如何，当您使用url添加属性“fill”时，库将创建一个模式。如果它是您使用的第一个“填充”属性，则此模式称为raphael-pattern-0下一个模式称为raphael-pat

我的问题是，填充不是用svg画布缩放的，因此按比例，它的大小是路径缩放之前的两倍。

是否有任何简单的方法可以将填充模式与svg的其余部分一起缩放？

注意，可以仅使用raphael库的函数来完成此操作

在raphael对象上应用scale函数时，它会创建一个新的svg节点，坐标已缩放，但遗憾的是，它不会修改填充属性

无论如何，当您使用url添加属性“fill”时，库将创建一个模式。如果它是您使用的第一个“填充”属性，则此模式称为

raphael-pattern-0

下一个模式称为

raphael-pattern-1

，等等。）

知道了这一点，就可以根据

您可以使用

document.getElementById（“raphael-pattern-0”）

获取模式的属性，并使用

setAttribute

例如（取决于你真正想做什么），它可能是这样的：

paper=Raphael('previewBody',480,480);
paper.path({"stroke-width":1},'M0,0 L480,240 L480,480 L240,480 z')
  .attr('fill','url(bg.png)'))
  .scale(.5,.5,0,0);

您还可以修改

、

patternUnits

和

patternContentUnits

属性

希望它能回答你的问题

我不知道为什么，但我的Raphael library版本（我使用的是最新版本）没有将ID设置为@ThibThib。这可能是因为我们现在有2013年：）

我还将发布我的解决方案：

var pat = document.getElementById("raphael-pattern-0");
pat.setAttribute("height", pat.getAttribute("height")*0.5);
pat.setAttribute("width", pat.getAttribute("width")*0.5);


拉斐尔试验
$（文档）.ready（函数（）{
拉斐尔，路径，模式；
raphael=raphael（document.getElementById（'raphael'），500500）；
路径=拉斐尔圆（200200180）；
attr（'stroke'，'000000'）；
路径属性（'笔划宽度'，3）；
attr（'stroke-opacity'，1）；
attr（'fill'，'url(http://3.bp.blogspot.com/_M4WdA9j-b-g/TLMF9JJJwcI/AAAAAAAAAV4/p0Y_Wo3S3sQ/s1600/Landscape1.jpg)');
pattern=$（path.node）.attr（'fill'）；
如果（模式）{
pattern=pattern.replace（'url（'，''）.replace（'），''）；
模式=$（模式）；
}
//形状元素文档：http://msdn.microsoft.com/en-us/library/hh846327（v=vs.85）.aspx#形状(u)元素
//填写要素文档：http://msdn.microsoft.com/en-us/library/bb229596（v=vs.85）.aspx
setTimeout（函数（）{
如果（Raphael.vml）{//SVG不受支持（IE7和IE8），并且它不工作：/
var html=$（path.node.html（）；
html=html.replace（/rvml:/g'，）；//删除前缀
html=html.replace（/=/g，'='）；
html=html.substr（html.indexOf（'/>'）+2）；//删除xml元素
var src=''；
$（html）。每个（函数（）{
if（$（this.prop（“标记名”）=“FILL”）{
src=$（this.attr（'src'）；
}
});
如果（src！=''）{
var html=$（path.node.html（）；
html=html.replace（src，src+'“size=“50,50”）；
$（path.node）.html（html）；
attr（'stroke'，'000000'）；
路径属性（'笔划宽度'，3）；
attr（'stroke-opacity'，1）；
}
}
else{//SVG受支持，并打印正确的URL
$（模式）[0].setAttribute（'width'，50）；
$（模式）[0].setAttribute（'height'，50）；
$（模式）.find（'image'）[0].setAttribute（'width'，50）；
$（模式）.find（'image'）[0].setAttribute（'height'，50）；
$（模式）.find（'image'）[0].setAttribute（'preserveSpectratio'，'defer none-meet'）；
}
}, 1000);
});

注意以下几点：

访问VML填充图像如下所述：
改变图像大小后，我不得不为VML版本重置笔划
出于某种原因，jQuery
```
.attr
```
不适合我，所以我使用了
```
setAttribute
```
（Chrome）
我设置了
```
preserveAspectRatio
```
，以实现与VML中相同的效果。如果要查看差异，可以禁用它（）
```
setTimeout
```
用于等待加载图像，因为SVG在加载图像后设置了参数，并覆盖了我的大小更改

当然，您也可以使用不同的设置：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <title>Raphael Test</title>

        <script type="text/javascript" src="js/libs/jquery.js"></script>
        <script type="text/javascript" src="js/libs/raphael.js"></script>
    </head>
    <body>
        <div id="raphael"></div>
        <script type="text/javascript">
            $(document).ready(function() {

                var raphael, path, pattern;

                raphael = Raphael(document.getElementById('raphael'), 500, 500);

                path = raphael.circle(200, 200, 180);
                path.attr('stroke', '#000000');
                path.attr('stroke-width', 3);
                path.attr('stroke-opacity', 1);
                path.attr('fill', 'url(http://3.bp.blogspot.com/_M4WdA9j-b-g/TLMF9JJJwcI/AAAAAAAAAV4/p0Y_Wo3S3sQ/s1600/Landscape1.jpg)');
                pattern = $(path.node).attr('fill');
                if(pattern) {
                    pattern = pattern.replace('url(', '').replace(')', '');
                    pattern = $(pattern);
                }

                // Shape element documentation: http://msdn.microsoft.com/en-us/library/hh846327(v=vs.85).aspx#shape_element
                // Fill element documentation: http://msdn.microsoft.com/en-us/library/bb229596(v=vs.85).aspx

                setTimeout(function() {
                    if(Raphael.vml) { // SVG not supported (IE7 & IE8) and it doesn't work :/

                        var html = $(path.node).html();
                        html = html.replace(/rvml:/g, ''); // remove prefix
                        html = html.replace(/ = /g, '=');
                        html = html.substr(html.indexOf('/>') + 2); // remove xml element

                        var src = '';
                        $(html).each(function() {
                            if($(this).prop("tagName") == 'FILL') {
                                src = $(this).attr('src');
                            }
                        });

                        if(src != '') {
                            var html = $(path.node).html();
                            html = html.replace(src, src + '" size="50,50');
                            $(path.node).html(html);
                            path.attr('stroke', '#000000');
                            path.attr('stroke-width', 3);
                            path.attr('stroke-opacity', 1);
                        }
                    }
                    else { // SVG supported and it prints correct URL
                        $(pattern)[0].setAttribute('width', 50);
                        $(pattern)[0].setAttribute('height', 50);
                        $(pattern).find('image')[0].setAttribute('width', 50);
                        $(pattern).find('image')[0].setAttribute('height', 50);
                        $(pattern).find('image')[0].setAttribute('preserveAspectRatio', 'defer none meet');
                    }
                }, 1000);
            });
        </script>
    </body>
</html>