問題タブ [jcanvas]

jquery の jcanvas プラグインの最新バージョンを使用しています。オブジェクトを回転すると、x と y が変化するはずですが、変化しません。これらのプロパティをリセットするには、何らかのメソッドを呼び出す必要がありますか? jquery と jcanvas を参照するスクリプト タグは省略しました。

jCanvasレイヤーをその中心を中心に回転させていますが、その後、新しいx座標とy座標を計算する必要があります。私は以下のコードを使用していますが、それは悪い値を返します：

単純な回転の場合-たとえば90度回転すると、次のように新しいコーナーのxとyを取得できます。

しかし、もっと複雑なケースはどうでしょうか？

編集：

この式を見つけましたが、時計回りに回転している場合にのみ正しく機能します。反時計回りの回転はどうですか？

globalCompositeOperation (または「乗算」カラー操作を提供する他のプラグイン) をjCanvas jQuery プラグインに統合するにはどうすればよいですか?

jCanvas の最新バージョンを使用しています。キャンバスに 2 つのレイヤーがあります。これらの2つのレイヤーを描画する機能があります。関数が呼び出されるたびに、一方のレイヤーをクリアし、もう一方のレイヤーをそのまま保持したいので、後者に曲線をプロットしています。jCanvas を使用して単一のレイヤーをクリアするにはどうすればよいですか? jCanvas のドキュメントでは、レイヤーのクリアに関する情報は見つかりませんでした。

この関数で jCanvas ライブラリを使用して、キャンバスにいくつかの図形を描画します。

ご覧のとおり、各形状には固有の名前があります。マウスでクリックした後、選択した形状の名前を返す関数を作成したいと思います。次のように、名前がわかっている形状の属性を正常に編集できます。

しかし、それをクリックして既存の形状の名前を返す shapeSelect() 関数を実装する方法がわかりません。

jCanvas と KineticJS の両方でこれを試しました。追加した画像をドラッグ可能にすると:

キャンバス/ステージは、iPad でのクリックに対して応答しなくなります。クリック/タップを認識する唯一の場所は境界線です。

誰かが同様の問題に直面しましたか?どのようにこれを解決しましたか?

ピクセルマップのオブジェクトがあり、各行には色情報を含む列のオブジェクトが含まれています。次に、 を使用して色を選択し、switch()キャンバスに描画します。コードは次のとおりです。

ピクセルを描画しますが、ピクセルの位置は何らかの形でズームされていますが、ピクセルは実際には 1px の大きさです。どのくらいズームするか判断できません。しばらくしてキャンバスに描くと位置が合っています。どうしたの？

編集: jsFiddle で再作成しました: http://jsfiddle.net/qyNTn/

jCanvas コードを、window.resize で起動する render メソッドにまとめました。

これにより、次の画像が描画されます。

目的は、キャンバス全体をクリアするために render が呼び出されたときの最初のステップです。

これらは、キャンバスをクリアするための 2 つの別々の試みであり、どちらも機能しません。キャンバスをクリアしないと、結果は次のようになります。

これは直接描画するのではなく、レイヤーに関係しているという一般的な考えがありますが、キャンバスがクリアされない理由に困惑しています...

ティア。

同じキャンバスに 2 つのレイヤーに依存しないレイヤー マスクを作成することはできますか? 私は試しましたが、あまり成功しませんでした。レイヤーインデックスに影響を与えるマスクが原因だと思います。マウスオーバーでマスキングを有効にすることでこれを強調しました (こちらを参照)。レイヤーマスクの上にマウスを置くと、他のレイヤーマスクが消えます。プロパティとしてレイヤーを描画すると、mask:trueレイヤーマスクが1つだけ表示されます。「レイヤーマスクごとに別のキャンバスを作ってみませんか？」と思うかもしれません。キャンバスを合成 jpeg としてレンダリングするつもりなので、できません$("canvas").getCanvasImage();(2 つのキャンバスでは難しいでしょう)。

最終的な目標は、キャンバスを垂直に 2 つのペインに分割することです。各ペインには、ドラッグ可能な画像が表示されます。ユーザーはペイン内の画像を移動して「トリミング」し、結果を合成画像としてレンダリングします。この例はかなり近いですが、右側のペインの下にある緑色のボックスをドラッグすると、そのペインにデッドスペースが作成されます。

ご協力ありがとうございます。