2

ここに画像の説明を入力

HTML5キャンバス上に描画するカラーバーです。各カラー バーは、00:30 や 05:45 などのタイム スタンプを表します。

これらのカラー バーは基本的に、キャンバス上に描画する四角形です。

タイムスタンプを表示し、ページ上の他のものを更新できるように、四角形ごとにクリックイベントを登録したいと思います。四角形ごとにクリックイベントを登録する方法を教えてください。セクションや複数のキャンバスなど、他の要素を使用する必要がありますか?

ところで、私は EmberJS を使用しているので、データの更新は問題ではありません。

アップデート

これは、別のスタックオーバーフローの質問からの JSfiddle です。 http://jsfiddle.net/DV9Bw/

draw: function(index, score){
    var canvas = this.get('element')
    var ctx = canvas.getContext('2d');
    ctx.fillStyle=this.get('colorCodes')[Math.round(score)];
    ctx.fillRect(index*3,0,3,150);
    this.drawLastAmbiant()

色の値が返されますが、他のデータも表示したいと思います。

4

3 に答える 3

1

これはユースケースの完全な解決策ではないかもしれませんが、ここで提供したjsfiddleの例を少しいじった後、結果が得られました。

ところで、私は EmberJS を使用しているので、データの更新は問題ではありません。

最初に、 emberの使用を反映するために例を具体化しました。

私が推測する難しい部分は、クリックされた要素がモデルにもデータにも関係がないため、ember レコードに含まれるデータをキャンバス内のクリックされたバーにどのようにマッピング/関連付けるかということです。model

考えられる回避策は、バーがクリックされたときに現在のマウス座標でバーのインデックスを計算し、 で計算されたインデックスによって関連データを検索することobjectAt(index)です。

考えられる回避策については、提供されているjsbinを参照してください(単純化のためにフレームワークを使用せずに)。これはやや単純なアプローチであり、さらに改善できる可能性がありますが、出発点として、これまでのところ動作するように見えます。

それが役に立てば幸い。

于 2013-06-23T12:29:44.320 に答える