問題タブ [kineticjs]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
1 に答える
15766 参照

html5-canvas - 要素のHTML5キャンバスマウスオーバーイベント(ツールチップを表示)

私は視覚化プロジェクトに取り組んでいます。私のデータに基づいて、私はキャンバス上に何百もの小さな円をプロットしています。マウスオーバーイベントを追加して、マウスが円の囲み領域である場合は常に、データのノードプロパティがツールチップまたはキャンバス上のテキストとして表示されるようにします。私の現在のdrawCircleメソッド

私はkinetic.jsを調べまし たが、ライブラリを使用してdrawCircleメソッドを[繰り返し]呼び出す方法がわかりません。

どんな助けでも大歓迎です。

0 投票する
1 に答える
1213 参照

html - html5ツールチップオブジェクト?

私はhtml5canvastutorials.comでこのチュートリアルを見つけました:

tooltipオブジェクトは、事前に定義されていない状態で使用されます。HTML 5キャンバスには事前定義されたtooltipオブジェクトがありますか?または私はここで何かが欠けていますか?

0 投票する
2 に答える
6956 参照

javascript - KineticJS - Shape.setPosition();

KineticJS をいじるのに少し問題があります。

私のフィドルからわかるように、ドロップ イベント内の Shape オブジェクト (ボックス) にアクセスして、x、y 座標を取得し、それらに対して計算を実行して、必要な新しい座標を取得しています。形状をスナップしますが、位置を設定してボックスを再描画する方法がわかりません。

ドキュメントはせいぜいまばらです。

http://www.kineticjs.com/api-docs.php (Shape.setPosition( x, y) を参照)

このライブラリをいじった人はいますか?

編集:私の現在の作業フィドル: http://jsfiddle.net/Programmer/m4MZk/

0 投票する
2 に答える
10617 参照

html - HTML5:円/円弧をパーセンテージで塗りつぶす

これが私の擬似コードです:

KineticJSライブラリを使用して、作成する形状を制御し、必要に応じて再描画しています。私の問題は、上記のコードがまったく機能しないことです。私は数学が間違っていると思います。なぜなら、私radiansが次のようなものに変更すると4.0 * Math.PI、円全体が描画されるからです。

参考までにHTML5CanvasArcチュートリアルを使用しています。

0 投票する
1 に答える
19103 参照

html - Kineticjs vs Raphaeljs

HTML5 を使用して新しいプロジェクトを開始しています。最も人気のあるグラフィカル ツールキットの 2 つは、KineticJSRaphaelJSです。これらを使用した経験がある場合、何かアドバイスはありますか? それらはどの機能を提供しますか? また、どちらかを使用する利点はありますか?

たとえば、RaphaelJS のみがレガシー ブラウザーで動作します (ただし、これは私が必要とする機能ではありません)。

0 投票する
2 に答える
4831 参照

jquery - jQuery (.animate) と KineticJS フレームワークを使用してキャンバス サイズを変更する

jQuery を使用して HTML5 キャンバス要素のサイズを変更しようとしています。(注意: キャンバス内のオブジェクトではなく、要素のサイズです!)

jQuery のみを使用して私のコードで正常に動作しています: http://jsfiddle.net/dAQBD/

しかし、KineticJS フレームワークで同じことをしようとすると、まったく機能しません。私のコード: http://jsfiddle.net/mLMSE/1/

<div>これは、フレームワークが- through - ( var stage = new Kinetic.Stage("div", 500, 200);)に基づいてキャンバス自体を作成するためだと思われます。

これを回避する方法はありますか? 私は実際のプロジェクトでかなり多くのことを行ってきたので、今はフレームワークを変更したくありません (これは単なるダミー コードです)。ありがとう。

(私のフィドルは「拡張」と言っているのに、実際にはサイズが縮小していることを知っています。タイプミスです。)

0 投票する
3 に答える
5859 参照

javascript - KineticJSフレームワークによって作成されたHTML5キャンバスのサイズ変更をアニメーション化する

KineticJSフレームワークによって作成されたHTML5キャンバス要素のサイズを変更しようとしています。つまり、キャンバス内のオブジェクトではなく、要素のサイズを変更しようとしています。

この問題ではjQuery.animate関数を使用できないため(CSSを変更し、要素の実際の属性を変更したい)、KineticJSAPIによって提供される内部関数を使用する独自の関数を開発する必要がありました。stage.setSize(width, height)アニメーション関数を書いた経験がまったくないので、まったく間違った状況に近づいているのかもしれません。

問題:パフォーマンスに依存するため、多くの場合、十分な速度ではありません(setIntervalのおかげで)。言うまでもなく、モバイルデバイス(iPhone 4S iOS 5.0.1テスト済み)では部分的にしか機能しません。どのソリューションも、モバイルデバイスでも、ほぼ完璧に機能する必要があります。

この機能を改善するためのさまざまな方法を探しています。シュート。

(取得しなかった場合は、私のコードへのリンクを参照してください。http://jsfiddle.net/G4nuH/animateResizeが関連する関数です。)

0 投票する
1 に答える
2501 参照

html5-animation - KineticJS - クリックイベント

私は KineticJS で動作する小さなアプリケーションに取り組んでいます。円を作成し、ページの読み込み時にフェードインしています...私が遭遇している問題は、メインの円をクリックしてメインの円の周りに小さな円を「生成」すると、すべての円が消えることです...

http://jsfiddle.net/T9RfA/1/

他の誰かがこの種の問題に遭遇しますか?

0 投票する
2 に答える
4293 参照

javascript - KineticJSを使用したHTML5キャンバス上の線形アニメーション。作成方法は?

HTML5キャンバスベースのミニゲームを開発していますが、線形アニメーションを整理できないようです。

キャンバスに「ターゲット」オブジェクトを追加するためにこのコードを使用しています。

このコードを試して、線形アニメーションでこのオブジェクトをアニメーション化する必要があります。

しかし、それはうまくいきませんでした!なにが問題ですか?

0 投票する
1 に答える
340 参照

javascript - FPS システムの空きメモリ

私は KineticJS (およびキャンバス) で開始し、学習用の小さなゲームを作成しています...現在、2 つのレイヤーしかありません。

  • 最初に、Kinetic.Image によって作成されたマップを使用します。
  • 引き分けで最後にゲームを行った 2 番目。

1秒あたりX回表示を更新したいのですが、20回または30回後、ゲームは本当に遅くなります..そして、イベントクリックをフラッディングするときも同じです(ドロー機能も起動します)...さらに、2番目のレイヤーで見ることができます: 古いテキストは決してクリーンではなく、新しいテキストが上に追加されます... :/

すみません、私の英語は本当に下手です。

すべてに感謝します。