2

我有一個請求,我做類似的襯衫設計師你會在主流的T恤網站上看到的東西的客戶端。Jquery襯衫設計師 - 如何?

什麼它需要是一個用戶能夠在一個文本輸入法輸入文字,然後拖動圖像周圍的文本。我有2點主要的擔憂是,如果我可以計算出來,我就可以做這個項目......

關注1:我怎樣才能文本拖動圖像周圍?我的想法是使用jQuery UI可拖動來拖動頁面上的文本。我只是使用jquery獲取文本輸入的值,並將其放入可拖動的div。這聽起來像是一個好計劃嗎?

關注點2:我如何採取有他的襯衫的形象,他想,所以我可以將圖像傳遞給網站所有者在該位置的文本主要DIV的快照?是否有某種腳本可以抓取div的快照?我四處尋找答案,找不到多少。

任何幫助是極大的讚賞

+0

請查看http://product.herobo.com/,我已經開發了它,如果你需要這個插件的代碼,請聯繫這裏[email protected] –

回答

3

您可能需要(如果是,你需要支持的瀏覽器支持)考慮使用HTML5的畫布。然後,您將能夠使用圖書館像這樣:http://www.nihilogic.dk/labs/canvas2image/對於拖放,看看這個鏈接:http://html5.litten.com/how-to-drag-and-drop-on-an-html5-canvas/

如果必須使用jQuery來支持客​​戶端瀏覽器,我不相信有一個簡單的方法捕捉圖像。然而,你可以做的是將t恤上的文本的座標,寬度,字體,字體大小和字體顏色發送到服務器,並在那裏渲染圖片。然後,您可以在完成訂單之前,將該圖片加載到客戶端瀏覽器的確認對話框中。如果這聽起來很合理,並且您有權訪問服務器環境,那麼您使用哪種語言進行編程? PHP?其他?

您可能還需要考慮如何是網站的所有者實際上會造成那些在網站上做出的T恤衫。可能是文本的座標,以及字體等......都是他/她需要製作襯衫的原因,而不是僅僅是最終版本的外觀。

+0

我絕對需要能夠支持大多數瀏覽器。至少Firefox和IE10,9和8。 網站所有者擁有紡織公司,所以他或多或少尋找一個圖像,看看客戶端如何想的文本。然後,他會盡可能地將圖片放在物品上。 我想你的想法在結賬時爲客戶重新渲染圖像,以及爲管理員提供訂單時可能是最好的主意。 我打算使用codeigniter框架來用jquery和php對其進行編碼。 有更多想法。我喜歡你現在的音樂。 –

+0

好吧,直到你放棄IE8支持帆布解決方案絕對不會工作。 但是,看到你已經知道字體的x/y座標,以及文本的大小和顏色,那麼我會推薦使用像這裏提供的php ImageTTFText庫:http:// php .net/manual/en/function.imagettftext.php。您將首先加載基礎襯衫圖像,然後使用上述庫插入文本。您可能還需要做一些數學計算,以確定是否所有角色都符合一行。我不知道這是否包裝。 如果您需要更多幫助,我可以編輯我的答案。 –

+0

所以,你是說要讓客戶端使用可拖放/可拖拽的jQuery UI來拖動他們想要的文本,然後根據他們點擊提交按鈕時的座標,使用imagettftext函數基本上製作一個靜態圖像與上面的文本的襯衫。 這實際上聽起來完全可行。 –