使用ARBITRARY函數（x，y） - >（x'（x，y），y'（x，y））來轉換SVG圖像的最簡單方法

什麼是最簡單的方法來轉換（x，以下列方式SVG圖像的y）座標：使用ARBITRARY函數（x，y） - >（x'（x，y），y'（x，y））來轉換SVG圖像的最簡單方法

X - > X '（X，Y）

ý - > Y'（X，Y）

實施例：

x - > x^2 + y^2

y - > sinx + cozy

該方法可以修改原始SVG文件，也可以生成包含修改的SVG圖像的新SVG文件。

來源

2015-11-13 The Riddler

（翻譯）（旋轉）矩陣變換？「最簡單的方法」是什麼意思？程序員快速完成並喝啤酒的最簡單方法是什麼？ CPU處理轉換最簡單的方法是什麼？好像你在問一個意見。你有什麼嘗試？（我假設你正在編寫一個遊戲/其他動畫，並在屏幕上移動一個svg對象等等......這是否正確？） – zipzit

「程序員快速完成並喝啤酒的最簡單方法？」是。（我假設你正在編寫一個遊戲/其他動畫，並在屏幕上移動一個svg對象，等等......這是否正確？）不，實際上我正在嘗試將SVG地圖投影從正弦曲線更改爲Equirectangular。 –

對不起，這聽起來像是一項家庭作業。如果是我，我會從這裏開始... http：//www.cs.mtu.edu/~shene/COURSES/cs3621/NOTES/geometry/geo-tran.html，然後爲您找到一個不錯的矩陣庫選擇的語言。 – zipzit

記住SVG包括以下功能：

翻譯（）
旋轉（）
規模（）
歪斜（）
矩陣（）

我最初認爲你可以使用可用的矩陣變換函數SVG系統。因爲這個矩陣是靜態的，我不積極，你會得到你以後的東西。很大程度上取決於變換矩陣的樣子。

下面是一個樣本jsfiddle。

<svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg"> 
    <image x="20" y="20" width="300" height="250" xlink:href="https://upload.wikimedia.org/wikipedia/commons/0/0c/Cow_female_black_white.jpg" /> 
</svg> 

<h2>A skew transformation along the y-axis</h2> 

<svg version="1.1" baseProfile="full" width="300" height="400" xmlns="http://www.w3.org/2000/svg"> 
    <image x="20" y="20" width="300" height="250" xlink:href="https://upload.wikimedia.org/wikipedia/commons/0/0c/Cow_female_black_white.jpg" 
    transform="matrix(1,.5,0,1,0,0)" /> 
</svg>

你看過D3.js庫的投影內容嗎？ D3使用SVG元素，他們有一些相當不錯的工具。我看到人們也爲此寫了額外的工具。你見過geo projections project for D3 at Github嗎？我在那裏看到d3.geo.equirectangular選項。也許這會讓你很快喝啤酒？

我知道你可以使用Canvas做更多的事情。你必須將你的SVG圖像轉換成Canvas，但這是可行的。看看這個awesome tutorial動態旋轉圖像，在畫布上。

來源

2015-11-13 01:59:57 zipzit

那麼有沒有什麼方法可以用Canvas與SVG進行那種轉換？我不認爲D3是我正在尋找的，因爲我想要的功能是任意的，而不是預先設定的。 –

當然。上面列出的D3插件是開源的，所有代碼都在github中。看看代碼，找出它的工作原理，並將其移動。首先，我會嘗試使用您選擇的變換矩陣，看看您是否可以讓它們工作。請記住，我沒有在jsfiddle演示文稿中看到您的原始開始代碼。你沒有很好地解釋你想要轉換的東西。轉換是否完成了一次，然後顯示，或者是一個動態轉換，就像我上面鏈接的畫布教程一樣？ – zipzit

使用ARBITRARY函數（x，y） - >（x'（x，y），y'（x，y））來轉換SVG圖像的最簡單方法

回答

相關問題