2


我有两个相似的 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/

4

2 回答 2

1

我遇到了同样的问题。

具体来说，当鼠标悬停在圆上时，使用动画来增加圆的大小，笔画宽度变为动画期间应有的~1/2，并且在随后的动画中，它会在“增长”期间恢复到适当的大小" 动画，但在该动画结束时再次变为半角，并在“缩小”动画期间和之后保持半角。宽度的变化不是动画的——例如，在增长（有反弹）动画的最后一端，线条会“弹出”到较细的宽度。这与上面原始问题中 jsfiddle 示例的不当行为有些不同，但以下修复程序修复了这两个问题。

受 Phillippe Deschaseaux 的文章（由 Neil 上面的评论指出）和 Phillippe 对类似问题的修复的启发，我发现类似的修复解决了这个问题。

具体来说，在 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 对他的问题的解决方法是消除最后三行注释，它们在调整容器大小时调整笔触宽度（Phillippe 正在做的事情），而我的问题的解决方法是消除前三行，它调整笔触宽度基于对象的比例（我在做什么）。当然，消除所有 6 行可以解决这两个问题。

我怀疑这是一个平台相关的问题。（我正在使用 Safari。）在这种情况下，对 raphael.js 的正确修复将比仅仅删除这六行更复杂，也许可以解释为什么它还没有被修复（以及为什么这六行曾经写在第一名）。

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

于 2013-06-21T23:04:56.970 回答
0

试试这个

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

​</p>

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

//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);
于 2012-09-24T22:16:54.667 回答