Question

我有两个类似的svg对象。我将其中一个缩放3并做一些事情。之后，我将其调整为原始大小（按比例缩放1）。然而，奇怪的是它的笔画宽度变化，变得更小。

这是一个错误还是我错过了什么？有一个简单的解决方法/黑客？我正在画出数以万计的形状。任何帮助将不胜感激。

完整的代码是

pageWidth = $(window).width();
pageHeight = $(window).height();
r = Raphael("holder",pageWidth, pageHeight);

r.setStart();
circ = r.circle(250,250,100,100).attr({'stroke-width':10, 'fill':'green'});
rct = r.rect(200,200,100,100).attr({'stroke-width':2,'fill':'grey'});

st = r.setFinish();

circ2 = r.circle(350,450,100,100).attr({'stroke-width':10, 'fill':'green'});
rct2 = r.rect(300,400,100,100).attr({'stroke-width':2,'fill':'grey'});


x = circ.attr('cx');
y = circ.attr('cy');

setTimeout(function(){st.animate({'transform':'s3,3,'+x+','+y},1500)},1000);

setTimeout(function(){st.animate({'transform':'s1,1'},1500)},3000);

http://jsfiddle.net/WFtaG/23/

Answer 1

我遇到了同样的问题。

具体来说，使用动画在鼠标悬停时增加圆的大小，笔画宽度变为动画期间应该的大小的1/2，并且在随后的动画中，它将在期间重新获得适当的大小。 “增长”动画但在动画结束时再次变成半宽，并在“缩小”动画期间和之后保持半角。宽度的变化没有动画 - 例如，在生长（带有反弹）动画的最后一行，线条将“弹出”到薄的宽度。这与上面原始问题中jsfiddle示例的不当行为有些不同，但以下修复修复了两者。

受到Phillippe Deschaseaux的article（Neil上述评论指出）和Phillippe fix的类似问题的启发，我发现类似的解决办法解决了这个问题。

具体来说，在raphael.js中注释掉以下6行：

                case "stroke-width":
                    //if (o._.sx != 1 || o._.sy != 1) {
                    //    value /= mmax(abs(o._.sx), abs(o._.sy)) || 1;
                    //}
                    //if (o.paper._vbSize) {
                    //    value *= o.paper._vbSize;
                    //}
                    node.setAttribute(att, value);

（是的，这是DraganS的评论（对他接受的答案）建议问题可能出现的地方。）

菲利普对他的问题的解决方法是消除最后三条评论线，当容器调整大小时调整笔画宽度（Phillippe正在做什么），而修复我的问题是消除前三行，调整基于对象比例的笔画宽度（我正在做的）。当然，消除所有6行都可以解决这两个问题。

我怀疑这是一个依赖于平台的问题。（我正在使用Safari。）在这种情况下，对raphael.js的正确修复会比删除这六行更复杂，或许可以解释为什么它还没有修复（以及为什么这六行都写在第一名）。

换句话说，如果你的代码需要在各种浏览器上正确运行，你应该做一些检查，看看哪些浏览器/版本需要那六行，哪些需要它们。如果你这样做，一定要给Dmitry Baranovskiy发一张便条！

Answer 2

试试这个

setTimeout(function(){st.animate({'transform':'s3,3,'+x+','+y},1500)},1000);
setTimeout(function(){st.animate({'transform':'s1,1,'+x+','+y},1500)},3000);

据我所知，它是关于抗锯齿的。你可以试试这个：

//setTimeout(function(){st.animate({'transform':'s3,3,'+x+','+y},1500)},1000);
//setTimeout(function(){st.animate({'transform':'s1,1'},1500)},3000);
setTimeout(function(){st.animate({'transform':'t1,1'},15000)},3000);

调整大小后，在raphael.js中宽度变化非常大

2 个答案: