問題タブ [jcanvas]

drawLine メソッドを使用して jCanvas で「地図」を描画しており、家の番号を曲線形状の中心に配置する必要があります (角度の数はランダムにすることができます)。

また、すべてのオブジェクトはドラッグ可能であり、テキストも一緒にドラッグできる必要があることに注意してください。

または、乱数の角度を持つことができるオブジェクトの中心をどのように計算できますか?

私はkineticjsを使用して透明レイヤーにパターン（つまり画像）を適用しようとしています.しかし、それは正方形のようなパターンを適用しています。私のコード、それを成し遂げる方法。

これがスクリーンショットです（私の結果）：http://i.stack.imgur.com/u3wWx.png

期待される結果は次のようなものです: http://i.stack.imgur.com/0oFGU.png

私は Web アプリを構築しています ユーザーが作成できるのは、HTML5 Canvas を使用した独自のイメージです。（私もJcanvasを使用しています）。

デスクトップでは、キャンバス サイズは 500x500 です (したがって、500x500 ピクセルの画像が生成されます)。

モバイルでは、キャンバスのサイズは 300x300 ですが、それでも 500x500 ピクセルのサイズの画像を生成したいと考えています。

今、私はアイデアがなくて、それを機能させることができません!

したがって、私はWindowsを使用しており、ノードでjCanvasを実行するための例に従いました: https://github.com/robertjustjones/jcanvas-in-node

そして、例を機能させることができますが、jCanvas の画像描画機能を使用しようとすると、次のような問題が発生します。

私が抱えている問題は、いくつかのデータが返されることです。つまり、空白のキャンバスの base 64 エンコーディングです。

さらに奇妙なことに、Linux で Node を実行すると、次のようundefinedに返されます。

キャンバス領域があり、いくつかの画像を追加しています。キャンバス画像をドラッグ可能にしたいと思っています。マウス クリックを処理するために addEventListener を介してマウス イベントを作成しました。
しかし、私の問題は、画像だけでなく、すべてのキャンバス コンテキストをドラッグ可能にできることです。

html コード:

JS コードの一部:

そして、最初のイメージ( gkhead )をキャンバス領域だけでグラガブルにし、2番目(ボール)のイメージを最初の( gkhead )イメージの領域だけで移動可能にすることはできますか?
HEREは私のフィドル
です アドバイスありがとうございます。

私は通常、グーグルで答えを見つけるので、これは私の最初のスタックオーバーフローの質問です。

キャンバス要素を大量に操作するプロジェクトに取り組んでいます。これを行うために、jQuery と jCanvas をインポートして使用しました。また、ECMAScript 6 でコードを書いています。より簡単なロギング方法のために、ログレベルを使用しています (したがって、「console.log」の代わりに「log.debug」や「log.info」など)。

現在、私の問題は、各キャンバスに関するデータを保存するために使用するオブジェクトと奇妙なやり取りをするイベントハンドラーにあります。基本的に、私の mousedown および mousemove ハンドラーでは、getCanvasData 関数を使用して特定のキャンバスのデータ オブジェクトを取得しています。これは明らかに正常に取得されていますが、「ドラッグされた」パラメーターにアクセスすると、常に null になります。コードの他の部分では、その値をオブジェクトに正常に変更しますが、イベント ハンドラーがアクセスするたびに、何があっても null のままです。プロパティの変更時に状態を出力する getter と setter を作成して、本当に null かどうかをテストしました (最後にコードのスニペットを提供しました。これは、getCanvasData 関数の「データ」割り当ての代わりです)。

完全なコードを現在の形式で見たい場合は、現在ホストしているプロジェクトを表示できます。これはライブ バージョンです。つまり、私の作業環境と同期しています。私が自宅で何かを変更すると、Web サイトが更新されます (したがって、未来から来た場合は、おそらくダウンしているか、完全に異なっている可能性があります)。

Web サイトでは、移動ハンドラーは、(入力または出力の 1 つをクリックして) ワイヤ/コネクタをスポーンするときに、ワイヤ/コネクタの一方の端を移動する責任があると想定されています。ハンドラーは「ドラッグ」を取得できないため、ワイヤーがマウスに追従することはありません。ただし、別の入力/出力をクリックすると (入力は出力にのみ接続され、その逆も同様であることに注意してください)、それらの間のワイヤが接続されます。そのアクションは、「ドラッグ」プロパティにアクセスすることによって実行されます (「ドラッグ」はワイヤ自体への参照) とそれに対するアクションの実行。ワイヤーを接続できるため、「ドラッグ」はハンドラーの外部では正常に参照されますが、ハンドラーの内部では参照されません。

getCanvasData() 関数:

コードの一部では、特定のクラスのすべてのキャンバスにさまざまなハンドラーを割り当てています。

mousedown および mousemove ハンドラー:

「ドラッグ」の状態が変化するのを確認するために使用したコードのスニペット:

上記のコードが有効な場合、「ドラッグ」が「オブジェクトオブジェクト」に変更されたことを通知する出力が表示されますが、(mousemove イベントをトリガーするために) マウスを動かすと、「null」であることを示す出力が表示されます (そうではありません)。未定義でも）。私のプロジェクトの他の部分がそれを使用すると、それが正常に使用され、実際にオブジェクトが取得されます。

1 つのことを除いて、すべてが jCanvas でうまく機能します。setPixels () を動作させることができません。Chrome と Safari でコードを実行しても、何も起こりません。

サンプル コードを jCanvas Web サイトのサンドボックスからコピーしました (ここでは、ブラウザーを見るとすべてが機能します)。

私が間違っていたかもしれないことについて誰か提案がありますか?