2016-04-22 14 views
0

HTML要素 'Canvas'は、getImageData関数とputImageData関数を提供するので、画像データを読み込むことも、変更することもできます。私はExtJS(Sencha、バージョン5.1)プロジェクトでこの機能が必要です。私はタイプ '画像'のスプライトを使用する必要があります。しかし、私はピクセルへのアクセスと、それが使用されている場合には、未使用キャンバスへのアクセスのどちらにも対処する機能を見つけることはできません。これを達成する別のアプローチがありますか?よろしくExtJS: 'image'タイプのスプライト:ピクセルを変更する方法は?

ラファウZiolkowskiと

+0

はい、「getImageData」と「putImageData」が対象です。例えば、dat = ctx.getImageData(0,0,1,1); dat.data [0] = 255; dat.data [1] = 200; dat.data [2] = 55; dat.data [3] = 155; ctx.putImageData(dat、0,0); '左上のピクセルを取得し、赤を255に、緑を200に、青を55に、アルファを155に設定して、データをキャンバスに戻します。 – Blindman67

+0

ありがとうございます。しかし、私はSenchaのExtJSを使用しており、イメージはタイプ 'イメージ'のスプライトとして持っています。これらのメソッドを使用するには、html-canvas要素にアクセスする必要があります。 SpriteとDraw-packageがhtml-canvasを使用しているかどうか、そしてこの要素へのアクセスがあるかどうかはわかりません。 –

+0

ブラウザがキャンバスをサポートしていてスプライトがSVGベースでない場合は、キャンバスを使用します。キャンバスの描画面を検査する必要があります。クロージャで隠れている場合は、ソースを調べてアクセスできるかどうかを確認する必要があります。しかし、私はキャンバスが公開されており、簡単に見つけることができると思います – Blindman67

答えて

0

ですから、キャンバスにあなたのスプライトを描画されて何をする必要がありますか? ext jsコードのブラウズには、HTMLキャンバス要素を使用するExt.draw.engine.Canvasコンポーネントがあります。このクラスでは、あなたが望むことをしてイメージデータを得ることができるかもしれません。そうでない場合は、常に要素を取得して取得し、適切なgetImageDataおよびputImageDataをレンダリングして呼び出します。お役に立てれば。

drawContainer = Ext.create('Ext.draw.Container', { 
    items: [{ 
     mySprite 
    }] 
}); 
// after render 
surface = drawContainer.getSurface(); 
surface.flatten(size, surface); // returns the drawn image data 
// do this or get the element 
canvas = surface.el.down('canvas'); 

これがあなたの望むものであるかどうかは分かりませんが、助けてください。スプライトの描画に関する豊富な情報は、ドキュメントを参照してください。 senchadocs

+0

もう少し説明できますか? –

関連する問題