2013-03-04 91 views
-1

我有一個朋友,誰是要建立一個網站,填寫它,需要的是這樣的:如何創建矩形,通過鼠標拖動它的角落,以創建四邊形,並用圖像

他希望用戶是能夠繪製四邊形(不管是逐點還是創建直方圖,然後通過拖動來轉換每個角)然後填充任何圖像。圖像必須包含通過繪製四邊形獲得的相同轉換。

它可能在HTML5上?也許一些JS與庫?

謝謝你的幫助。

注:這是一個什麼example我談論..

PS - 找到解決方案 - http://www.html5.jp/test/perspective_canvas/demo1_en.html

+0

你想得到什麼樣的幫助?我們只回答你問過的問題? (是的,這是可能的,也不是他不需要圖書館)......或者我們爲你創造了他想完成的任務嗎? – yckart 2013-03-04 13:49:41

+0

我只是想要一些例子,如果他們存在。謝謝 – DmitryS 2013-03-04 13:52:42

回答

0

是的,這是可能的。是的,你需要使用一些JavaScript庫。

0

這是一個良好的開端(靠近頁面末尾):

http://www.w3schools.com/html/html5_canvas.asp

這是一個有點不清楚他正是試圖做的。我不知道有什麼方法只用HTML5和Javascript裁剪或修改(實際更改)圖像。但僅用於顯示目的,您可以使用HTML5和JS來使其在網站上看起來不同。

+0

謝謝,我瞭解HTML5 Canvas的基礎知識,但它不是基礎知識。 – DmitryS 2013-03-04 13:55:03

+0

我使用ImageMagick來保存/修改圖像。我不知道有哪些JavaScript庫可以進行這種圖像處理。 – econduck 2013-03-04 14:05:14

+1

恥辱在你身上! http://w3fools.com/ – yckart 2013-03-04 14:09:11

0

你在找什麼叫做projective transformation

enter image description here

點A,B,C,d和A 'B',C 'd' 由一個透視性,這是一種投影變換相關。

馬丁·馮·Gagern已經回答了這個已經有很好的解釋在這裏:https://math.stackexchange.com/a/339033/332080

基本上你只需要這些輔助功能和一點點的時間來閱讀什麼馬丁已經寫:

  • Mat3#transform
  • Mat3#adjugate
  • Mat3#multiply