在raphael.js中改變行程寬度後，改變行程寬度荒謬

我有兩個相似的svg對象。我把他們中的一個縮小3，做一些東西。之後，我將其重新調整到原始大小（按1縮放）。但奇怪的是它的筆畫寬度變化越來越小。在raphael.js中改變行程寬度後，改變行程寬度荒謬

這是一個錯誤還是我錯過了什麼？有一個簡單的解決方法/黑客？我正在繪製無數的形狀。任何幫助，將不勝感激。

完整的代碼

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/

來源

2012-09-24 Cihad Turhan

看看這個，它可能是相關的 - http：// ehouais。net/posts/243 – Neil

@Neil該鏈接不再有效，它似乎已移到這裏：http://ehouais.net/2012/04/real-vector-graphics-know-how-to-scale/ – Matt

試試這個

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

來源

2012-09-24 22:16:54 DraganS

對不起昨天太忙了。我會盡力讓你知道它是否有效。 –

將中心座標附加到s1,1作品。然而，我無法理解你的第二個片段，因爲它沒有什麼新意。 –

忽略它。我錯了一個。事實是，如果您按比例3縮放對象，則筆觸寬度縮放1/3？！縮放到原始大小後，筆觸寬度保持不變。可能是庫中的錯誤。我很快就讀了解析的參數。在lib中查找其他if（command ==「s」）。這部分似乎沒問題。部分如果（絕對）被稱爲「S」命令而不是「s」。可能的錯誤可能出現在「stroke-width」的情況之後： – DraganS

我遇到了同樣的問題。

具體來說，在鼠標移動時使用動畫增加圓的大小，筆畫寬度變成了動畫過程中應該的大小的1/2，並且在隨後的動畫中它將恢復其合適的大小在「成長」動畫期間，當該動畫結束時再次變爲半寬，並且在「縮小」動畫期間和之後保持半尺寸。例如，寬度的變化沒有動畫效果 - 例如，該線會在增長的最後端（帶有反彈）動畫中「彈出」到較窄的寬度。這與上面原始問題中jsfiddle示例的不當行爲有所不同，但以下修復程序修復了這兩個問題。

受Phillippe Deschaseaux的article（上面Neil的評論指出）和Phillippe的fix的啓發，我發現類似的問題解決了這個問題。

具體來說，註釋掉以下6行raphael.js：

   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的正確修復將比刪除這六行更爲複雜，也許可以解釋爲什麼它尚未修復（以及爲什麼這六行文字曾經寫入第一名）。換句話說，如果你的代碼需要在各種瀏覽器上正確運行，你應該做一些檢查，看看哪些瀏覽器/版本需要那六行，哪些需要它們。如果你這樣做，一定要發送德米特里巴拉諾夫斯基一張紙條！

來源

2013-06-21 23:04:56 Matt

雖然這個問題並不新鮮，但感謝這個值得注意的答案。那時我使用瞭解決方法（即附加's1,1'）並完成了項目。我希望它能幫助別人。 –

在raphael.js中改變行程寬度後，改變行程寬度荒謬

回答

相關問題