KineticJSはより多くのフィルタを適用します -- html フィールド と html5-canvas フィールド と kineticjs フィールド 関連 問題

kineticjs apply more then one filter












0
vote

問題

日本語

HTML5でキャンバスを構築し、それらのチュートリアルに従っています:

http://www.html5canvasttorials.com/kineticjs. / html5-canvas-kineticjs-blur-filter-tutorial / http://www.html5canvasttorials.com/ KINETICJS / HTML5-CANVAS-KINETHJS-BLIGHTEN-OR-DARKEN-Image-Tutorial /

今、イメージの両方のフィルタを適用したい場合は、可能ですか?私は私のユーザーに絵のぼかしと明るさの両方を変えるようにしたいので、私はそれを思い付きました:

<事前> <コード> var Themex = new Kinetic.Image({ x: 0, y: 0, name: "BG_image", image: imageBG, width: stage.getWidth(), height: stage.getHeight(), filter: { Kinetic.Filters.Brighten, Kinetic.Filters.Blur }, filterBrightness: 0, filterRadius: 20 });

しかし、私はJavaScriptのエラーを受けます:フィルタの「Concaught SyntaxError:予期しない識別子」:{行。

任意のアイデア?

英語

i'm building a canvas in html5 and following those tutorials:

http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-blur-filter-tutorial/ http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-brighten-or-darken-image-tutorial/

now, if i want to apply both filters on the image, is that possible? i want to let my user to change both blur and brightness of the picture, so i came up with that:

var Themex = new Kinetic.Image({   x: 0,   y: 0,   name: "BG_image",   image: imageBG,   width: stage.getWidth(),   height: stage.getHeight(),   filter: {     Kinetic.Filters.Brighten,     Kinetic.Filters.Blur   },   filterBrightness: 0,   filterRadius: 20 }); 

but i get a javascript error: "Uncaught SyntaxError: Unexpected identifier " on the filter: { row.

any idea?

</div
        
   
   

回答リスト

1
 
vote
vote
ベストアンサー
 

井戸 誰かが必要とする場合 - 実際にはフィルタを入力する必要はありません。 SetFilter関数

を使用して、一度にフィルタを取り付けることは可能です。 <事前> <コード> var slider = document.getElementById('slider'); slider.onchange = function() { Themex.setFilter(Kinetic.Filters.Brighten); Themex.setFilterBrightness(Math.round(slider.value)); BGlayer.batchDraw(); }; var sliderBlur = document.getElementById('blurSlider'); sliderBlur.onchange = function() { Themex.setFilter(Kinetic.Filters.Blur); Themex.setFilterRadius(Math.round(sliderBlur.value)); BGlayer.batchDraw(); }; var Grayscale_But = document.getElementById('Grayscale_But'); Grayscale_But.onclick = function() { Themex.setFilter(Kinetic.Filters.Grayscale); Themex.setFilterRadius(Math.round(20)); BGlayer.batchDraw(); };
 

well if someone needs - actually there is no need to enter any filter. it's possible to attach any filter at a time - just like that, using the setFilter function

var slider = document.getElementById('slider');  slider.onchange = function() {   Themex.setFilter(Kinetic.Filters.Brighten);   Themex.setFilterBrightness(Math.round(slider.value));   BGlayer.batchDraw(); };  var sliderBlur = document.getElementById('blurSlider');  sliderBlur.onchange = function() {   Themex.setFilter(Kinetic.Filters.Blur);   Themex.setFilterRadius(Math.round(sliderBlur.value));   BGlayer.batchDraw(); };  var Grayscale_But = document.getElementById('Grayscale_But');  Grayscale_But.onclick = function() {   Themex.setFilter(Kinetic.Filters.Grayscale);   Themex.setFilterRadius(Math.round(20));   BGlayer.batchDraw(); }; 
</div
 
 

関連する質問

3  グループのサイズを取得します  ( Get size of group kineticjs ) 
私のKineticJSに問題があります。 2つの長方形を含むグループから<コード> getHeight() および<コード> 'PLACE IN YOUR USERFORM CODE Private Sub UserForm_Initialize() #If...

1  オフセットの変更は、要素の位置を動的に変更します  ( Changing offset dynamically modifies the position of element ) 
私のプログラムでは、 [75,75] に矩形を配置しましたが、オフセットを変更すると、四角形の位置はオフセットに従って変更されます。それを避けたいです。 ...

0  KineticJSフォントは厚すぎます  ( Kineticjs font is too thick ) 
次のコードを持っていて、私は本当に大胆なフォントを手に入れ続けますが、それを尋ねていません。 <事前> <コード> public Sub SetStopToEdit(ByRef currentStop As StopType) 3 ...

0  Kinetic-v3.8.2.jsは、Kinetic-V3.6.0.jsとKinetic-Image-Plugin-v1.0.1.js、修正方法を解決するか?  ( Kinetic v3 8 2 js breaks kinetic v3 6 0 js and kinetic image plugin v1 0 1 js h ) 
私は動的なキャンバスを動的に動的に動かして、私は背景のグリッドを望んでいたので、私はキネティックv3.8.2からキネティック。 キネティックV.3.6.0から、画像はドラッグ可能である必要がありますが、V3.8.2がアクティブになっているときにドラッグ可能に設...

0  FINETICJS設定ストローク  ( Kineticjs setting stroke programmatically ) 
私はいくつかのテキストを持っています、それは "Link VariableText"の形式でクラスを持っています(VariaBletextは各リンクに固有のものです)。テキストをマウスオーバーすると、jQueryを使用して対応するオブジェクトが色を変更するよう...

1  アニメーション性能は残業を減少させます  ( Animation performance decreasing overtime ) 
KineticJSを使って2D HTMLキャンバスアニメーションを作成しようとしています。 画像は背景としてHTML5キャンバスにロードされ、水平に移動しようとしています。 最初はコードが正常に実行されています。数秒後、移動速度が短縮されて動け始め、最後にC...

0  KineticJSを使ってレイヤーのキャンバスサイズを制御できません  ( Cant control layers canvas size with kineticjs ) 
私はKineticJSを使用しています、そして私は集中的な絵のためにパフォーマンスを得るために多くの小さなレイヤーを使いたいですが、個々のレイヤーサイズを設定するだけではない(Firebugで)それぞれのキャンバスサイズを調整しないでください:すべての作成キャ...

1  KineticJS - ストロークを見えない/削除します  ( Kineticjs make stroke invisible remove stroke ) 
次のように境界線で設定されているテキストがいくつかあります。 <事前> <コード> var line1 = new Kinetic.Text({ x: 190, y: 40, text: "Line 1", ...

3  kinetic.jsでオブジェクトを選択する方法  ( How to select an object in kinetic js ) 
kineticjs フレームワークを使用して、ブロックを使用して図形を描画するために使用できるエディタを設計しようとしています。これまでのところすべてが良かったです。長方形を追加して、サイズを変更して回転させることができます。しかし、私が言ったことは、最後...

0  KineticJSで画像のフィルタを削除する方法  ( How to remove filter for image in kineticjs ) 
こんな感じ: <事前> <コード> // apply grayscale filter to second image filteredYoda.applyFilter({ filter: Kinetic.Filters.Grayscale, ...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有