問題タブ [kineticjs]

ここで定義されているように、コードに画像があります

そして、実行中の特定の時間に（水平に）反転できるようにしたいと思います。画像ソースを反転済みのものに変更しようとしましたが、画像の複製、位置のリセットなど、多くの問題が発生しました。この方法で作成および使用された画像を反転する方法はありますか? ありがとう！

CanvasとKineticJSでレイヤーを管理する方法に誰かが光を当てることができるだろうかと思いました。clear（）;の理由を理解するのに苦労しています。レイヤー、次にdraw（）;を使用します。そのレイヤーで再び機能すると、元々そのレイヤーに追加したシェイプなどが戻ってきます。

例えば：

http://jsfiddle.net/vPGbz/1/

レイヤーをクリアすると完全に削除されると思いました。レイヤーを再描画するには、新しいシェイプを設定して新しいレイヤーを作成する必要があります。

誰かが私もこれを説明できれば、私はとても感謝しています。

乾杯、カイウス

私はデザイン スタジオのように作成し、ドラッグ アンド ドロップ、サイズ変更、テキスト、フォントなどのさまざまな機能を備えています。セッションを保存できる方法はありますが、ユーザーが後で再開した場合..彼は残したままのものを取得します。キャンバスの jpeg 画像は必要ありません.ユーザーが後で操作できるように状態を保存する必要があります.それは可能ですか? 私はこれにキネティックjsを使用しているので、誰かが何か考えを持っている場合は助けてください/

ありがとう

onClick イベントで KineticJS キャンバスに画像を描画しようとしていますが、うまくいきません。次のようなエラー: Uncaught TypeError: Cannot call method 'add' of undefined imageObj.onload smb が私を助けてくれることを願っています

... img src="testImage.jpg" onclick="drawImage(this.src);"

html5キャンバス内に画像を広げることは可能ですか..私は2,3の形状を持っているとします..長方形、円、いくつかの正方形、いくつかのランダムな不均衡形状..そして私は画像のリストを持っています..それらはテクスチャです.正確には色ではなく、テクスチャだけです。1つをクリックすると、おそらく座標をマッピングしてから画像を広げるか、それを掛けることによって、任意の形状内に広げます(仕上げを歪めることなくそれに応じて変換します)。それで？？もちろん、html5キャンバス内では説明が少し難しいですが、誰かがこれについて何か考えているなら、いくつかのポインタがいいでしょう..

よろしく、アシッシュ

Kinetic JSオブジェクトを SVGにエクスポートできますか?

または回避策は、Kintetic JS のキャンバスを SVG に変換することです。

編集：

fabricJSを使用するのが最善です。これは、ファブリック オブジェクトの操作中にキャンバスから SVG へのレンダリングをサポートするためです。

キャンバスに描画するために他のライブラリを使用せずにキャンバスをsvgに変換するため、Phrogzの回答を受け入れました。

編集 2: OK、めちゃくちゃです。Phrogz のライブラリはキャンバス要素のラッパーであるため、そのメソッドを使用してキャンバス上に描画します (キャンバス上で「リッスン」して SVG パスを作成するだけだと思いました)。したがって、最適なソリューションは間違いなく fabricJS です。

HTML5 Canvas 要素があります。キャンバス イメージをサーバーに送信する必要があります。私が試したすべての PC ブラウザーで問題なく動作しますが、iOS Safari はクラッシュし、ログ ファイルにメモリ不足エラーが記録されます。キャンバス画像は950x323のPNGなので500KB近くあります。これが私の送信コードの簡略版です。

Safari は送信を開始しますが、送信の数秒後にクラッシュします。サーバーはリクエストで他のデータを取得しますが、imageData は完全ではありません。フォーム enctype を「multipart/form-data」に変更しようとしましたが、それは役に立ちませんでした。

KinectJS を使用して、ある円から別の円への矢印を作成する方法は?

radius=r と stroke=1 の 2 つの円があります。滑らかな丸みを帯びた矢印を作成するにはどうすればよいですか?

ありがとう

私はインターネットを見回しましたが、何も見つかりませんでした。長方形で 1 の strokeWidth を使用する他の KineticJS の例を見てきましたが、それらはすべて、鮮明な 1 ピクセルの不透明な黒い線ではなく、半透明の 2 ピクセルの線を持っているように見えます。 .

さて、Google には解決策が本当に単純であるか不可能であるとは思えないので、KineticJS を使用して 1 ピクセルの境界線を取得する方法を知っていますか?

誰でもアイデアはありますか？

基本的に、使用するstage.onFrame(function(frame){animationLayer.draw()});とぎくしゃくしたアニメーションが得られますが、次のようなことをsetInterval(draw, 25);行っanimationLayer.draw();て描画すると、スムーズなアニメーションが得られます。

KineticJS で何か間違ったことをしているのですか、それともパフォーマンスが少し悪いのでしょうか? 私は四角形を回転させただけでしたが、とてもぎくしゃくしています。

Firefox よりも Chrome の方が悪いですが、Firefox はまだ完全にスムーズではありません。

誰にも理由がありますか？

ありがとう

編集:ここでのいくつかの問題は Chrome のせいであることが判明しました。最近の更新で問題が発生しています。