2

現在、HTML5 キャンバスの使い方を学んでいます。水平線に沿って円を描く簡単なスクリプトがあります。

スクリプトを強化して、よりインタラクティブにしたいと考えています。線に沿った円の 1 つをクリックできるようにしたいのですが、これにより、その円にリンクされたデータがキャンバス上にテキストとして表示されます。

これはキャンバスで簡単に達成できますか? 私が見たチュートリアルから、キャンバス自体にオンクリックを配置する必要があることがわかりました。そこから、マウスカーソルがクリックされた場所を特定し、クリックしたポイントがどの円に含まれているかを何らかの方法で特定する必要があると推測していました。

これに役立つコードやポインタのスニペットはありますか? あるいは、キャンバスは本当にこの種の問題に適していないのでしょうか? どんなコメントでも大歓迎です。

4

4 に答える 4

3

canvas の isPointInPath メソッドを使用して、マウス イベント処理を追加できます。以下のようなもの（未テスト）。

// add click event handler to canvas
// on click
var rect = canvas.getBoundingClientRect();
var mouseX = e.clientX - rect.left;
var mouseY = e.clientY - rect.top;

ctx.beginPath()
// draw stuff
if (ctx.isPointInPath(mouseX, mouseY)) {
  // handle click
}

これはあらゆる形状を認識します。これは、長方形と円以外のものを描く場合に非常に便利です。ただし、これの主な欠点は、クリックするたびに再描画する必要があることです (または、マウスオーバーを追加する場合は mousemove)。私の経験では、パフォーマンスの問題が発生する前に、少なくとも 300 個のオブジェクトを描画できます。

また、何らかの理由で修正されていない isPointInPath の firefox 実装にバグがあることにも注意してください。しかし幸いなことに、修正は簡単です

CanvasRenderingContext2D.prototype.isPointInPath_mozilla = function( x, y )
{
  if (navigator.userAgent.indexOf('Firefox') != -1){
    this.save();
    this.setTransform( 1, 0, 0, 1, 0, 0 );
    var ret = this.isPointInPath( x, y );
    this.restore();
  } else
    var ret = this.isPointInPath( x, y );

  return ret;
}

ctx.isPointInPath(x,y) を ctx.isPointInPath_mozilla(x,y) に置き換えるだけで、すべてが機能します

于 2011-03-10T16:01:39.327 に答える
2

キャンバスはラスター グラフィックを使用します。円を描くと、円としてのアイデンティティーはなくなります。ピクセルの集まりだけです。すべての形状を自分で追跡する必要があります。

SVG などのベクター グラフィックスを使用する場合、形状はアイデンティティを保持し、操作することができます。おそらくこの方法で簡単になるでしょう。

于 2011-03-10T05:38:09.753 に答える
0

キャンバスのクリックイベントを作成し、ハンドラーで、ユーザーが円をクリックした場合に計算する必要があります (いくつかの基本的な数学)。もう 1 つの方法は canvas を使用しないことですが、SVG にはraphaelのような便利なライブラリがあります。

于 2011-03-10T01:00:26.277 に答える
0

モバイルデバイスのキャンバス描画とシェイプマッチングのために、このようなことをしました。

私の手順はでした。

キャンバスの高さと幅のピクセル数に基づいて 2D 配列を宣言します。

配列を 0 で埋める

mousemove イベント (デスクトップ ブラウザー) の場合、位置を追跡します。X、Y 値を取得します。2D 配列では、行と列 (X と Y の値) に 1 を入れます。

描画後、2D バイナリ イメージ配列が得られます。

楽しい部分：

このリンクから画像運動量またはその他の適切な方法を試してください。http://www.imageprocessingplace.com/downloads_V3/root_downloads/tutorials/Tutorial--Algorithms%20for%202-D%20Object%20Recognition.pdf

いくつかの 2D 描画形状配列を保存し、現在描画されている画像と一致させると、最も近い一致を見つけることができます。ユーザーがまったく異なる形状を描いた場合は、適切なしきい値を見つけてみてください。

それが役立つことを願っています。

于 2012-03-08T16:23:05.667 に答える