8

HTML5キャンバスフレームワークが必要です:

  • オブジェクトを描画します(例:長方形)
  • オブジェクトのonmouseoverイベントで色/境界線のスタイルを変更します
  • クリックすると、いくつかのjsアクションを実行します

どうも

編集:私はついにraphaeljsを使用することにしました(代替はdojoになります)。このフレームワークは素晴らしいです。(HTML5キャンバスを必要とせず、SVGを使用します)

4

4 に答える 4

8

本当に必要なのは保持モードのグラフィックインターフェイスのようです。このインターフェイスでは、オブジェクトの作成、オブジェクトのマウスイベントの取得、プロパティの変更、移動などを行い、必要に応じてブラウザで画面の再描画に対応できます。<canvas>この場合、イミディエイトモードのグラフィックスサーフェスとして実際にはピクセルでいっぱいのボックスである、の代わりにSVGを使用する方がよいでしょう。

于 2010-10-10T11:47:37.820 に答える
6

あなたが言及したものよりもはるかに優れたパフォーマンスを発揮するKineticJSを忘れないでください。さらに、はるかに単純なAPIを備えています

于 2012-02-05T03:08:00.103 に答える
1

この質問を見てください:

HTML キャンバス JavaScript ライブラリとフレームワークの現在の最先端技術は?

Fabric.js は非常に印象的で、CAKE もまともなライブラリです。

于 2010-10-11T16:08:16.227 に答える
0

bHiveはこれを非常にうまく実行し、Actionscriptのバックグラウンドから来ているので、非常に使いやすいことがわかりました。ドキュメントが役に立たないため、デモを見る必要がありました。

あなたを助けること..

square = engine.createShape({
    shape: 'square',
    style: 'filled',
    backgroundColor: '#000',
    width: 120,
    height: 20,
    x: 20,
    y: 100
});

マウスアクションを実行するには、それをクリップオブジェクトに追加する必要があります。

clip = engine.createClip({ x: 20, y: 20 });

それで

clip.add(square);

イベントリスナーを追加する

clip.addEventListener('onmouseover',function(e) { some code ... });
clip.addEventListener('onclick',function(e) { some code ... });

ループでは、正方形を描く必要があります。

clip.draw();

デモのソースを使用して作業を進めているので、ロールオーバーとオンクリックが含まれているhttp://www.bhivecanvas.com/demos/cargame.phpを確認してください。

于 2011-09-27T18:37:36.640 に答える