Kineticjs圖像/形狀/圖層失真

我一直在努力實現很長一段時間的圖像失真。經過一番搜索，我發現this一個很好。Kineticjs圖像/形狀/圖層失真

我想將這添加到kineticjs項目，我敢肯定這是可能的，但我不明白如何添加它或如何將它實現到我的項目。圖像不僅僅是失真，它還會做一些濾鏡顏色和亮度過濾器。

在main.jsof this one他們開始獲取整個畫布的上下文，但我只想做一個節點（實際上是一個圖像或一個圖層）。

這裏是誰解釋我想實現的jsfiddle：在此我有一個大問題http://jsfiddle.net/junkees/fab3w85k/1/，格不動和河畔絕不會扭曲的形象（的jsfiddle拒絕跨域ressources，這就是爲什麼點擊它或在控制檯中觀看時，您會看到一點點癲癇的效果）。

來源

2014-09-30 yyg

編輯：OP的修訂代碼工作正常。唯一的問題是跨域圖像。將圖像放在同一臺服務器上可以解決問題。以下修改的小提琴將圖像作爲數據URL加載，而不是從另一臺服務器加載。代碼工作，沒有任何其他的變化：

http://jsfiddle.net/fab3w85k/4/

我認爲你可以實現你想要使用的是什麼自定義形狀。然後，您可以在其「drawFunc」中執行您的自定義繪圖，例如像這樣：

var customShape = new Kinetic.Shape({ 
    drawFunc: function(context) { 
     //Do all the custom drawing for your shape here. For example: 
     //context.clearRect(0, 0, 100, 100);  
    } 
});

既然你有形狀的2D上下文，你可以做你喜歡的所有自定義繪圖。當Kinetic想要重畫畫布時，將調用「drawFunc」。你可以通過調用layer.draw（）或stage.draw（）函數讓Kinetic調用這個函數。

來源

2014-10-01 12:17:47

我已經這樣做了：http://jsfiddle.net/junkees/fab3w85k/3/它完全是我爲失真而失敗，但沒有使用kinetic.image，因爲我看不到如何處理返回的圖像與動力學工作（應用過濾器，rescal，和其他東西） – yyg 2014-10-02 12:53:53

@YechouaGuedj，你還是跨域圖像問題的另一個受害者。請注意，由於安全問題，除非CORS設置正確，否則瀏覽器不允許對圖像進行低級別的畫布處理。所以你的代碼是完全正確和工作的。所有你需要做的就是將圖像託管在服務該頁面的同一個域中，你將會很開心。請參閱我的編輯修復。 – 2014-10-02 22:30:27

我知道他在真正的服務器上工作，但實際上我不知道如何重用扭曲的圖像（只需應用來自kineticjs的濾鏡顏色），我想將扭曲的圖像轉換爲動力學對象（圖像將完美），因爲失真「只是」我的應用程序的一部分。實際上輸入文件是一個圖像，輸出文件是一個distortedImage，我想在輸入中設置kinetic.Image並獲得一個kinetic.Image輸出 – yyg 2014-10-03 07:41:05

Kineticjs圖像/形狀/圖層失真

回答

相關問題