0

たくさんの小さな要素でできているフォトショップに大きな横縞の画像があります。背景は透明で、ストリップは小さい要素（左）から大きい要素（右）に移動します。私の目標は、このストリップをマウスイベントに対してインタラクティブにすることです。

各要素は、ある種の多角形の画像であり、左右にトリミングされてからpngとしてエクスポートされます。次に、キャンバスにインポートされます。

問題は、それらを並べて配置できることですが、長方形ではないため、各要素の両側にある透明なピクセルによって構成されるオフセットを計算して、正しく貼り付ける方法が必要です...私はKineticJsを使用しています各要素の正確なヒットエリアを取得するには...それで、kineticjsを使用して自動的にそれを行う方法があるのでしょうか、それとも各画像データを使用して実行できる何らかの操作があるのでしょうか。

私の問題の説明：

私の問題を説明しました

何か案は？

また、（単純な長方形ではなく）各アイテムに正確なmouseOverバウンディングボックスを使用し、各オフセットを手動で計算するソリューションを避けたいという理由だけでこれを行っています...しかし、それだけの価値はありませんか？！

4

3 に答える 3

0

さて、あなたはあなたが使いたいカスタムシェイプを持っているので、ここにそのためのチュートリアルがあります：http ://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-shape-tutorial/ 、あなたができる最も簡単なこと、そしてそれでもかなり長いように思えますが、その形状の境界線を計算することです。（2本のやや垂直な線と2本のやや水平な線）。次に、形状1の右側の垂直線が形状2の左側の垂直線と交差するかどうかをテストし、交差する場合は、画像の座標を同じ座標に設定します。

http://www.mathopenref.com/coordintersection.html

line1 = ax + b ..... line2 = cx+d //see possible tests
if(...intersection test...){  // or just test if some coordinate is left of some other coordinate
    shape2.setX(shape1.getX()+shape1.getWidth()); //account for image width, so they don't overlap
    shape2.setY(shape1.getY()) // no need to account for height
}

更新：これは、問題の動作に対する非常に大まかな解決策です。次のステップは、各画像に応じてより微調整を行うことです。

http://jsfiddle.net/9jkr7/15/

于 2013-01-22T21:15:09.773 に答える
0

正確な領域が必要な場合は、画像マップを使用してください。巧妙な調整と空白の画像GIFを使用すると、画像マップの特定の領域にカーソルを合わせると、必要な背景を表示できるはずです（JavaScriptが必要になる場合があります）。

私が考えることができる他のオプションは、SVG自体、または既存の多くのライブラリの1つを使用して、インタラクティブなベクターグラフィックをページに組み込むことです。

于 2013-01-22T23:17:55.510 に答える
0

また、画像データのすべてのピクセルを調べて、左端、上端、右端、下端のピクセルを計算する関数を作成することもできます。これに関するチュートリアルは次のとおりです。

http://www.html5canvastutorials.com/advanced/html5-canvas-get-image-data-tutorial/

于 2013-01-25T23:36:11.743 に答える