0

私はキャンバスアプリに取り組んでおり、ビットマップ、ライン、グループを作成し、クリックイベントを管理できる必要があります。

私は試した：

  1. キネティック-v3.9.6.js
  2. easeljs-0.4.2.min.js

これらは非常に優れたツールですが、ビットマップと行のグループの幅を取得する方法がありません。これを想像してください：

//init a image
var b = new Bitmap(...);
b.x ...
b.src ...

var l = Line(...);
l.x ...
l.y ...

//init group or layer or something like that
var g = Group(...);
g.add(b);
g.add(l);

var w = g.width;

これは機能しません。

現在、easeljs-0.4.2.min.jsをハッキングしてこれを実現することを検討しています。これは、as3 / as2の単純なコードを移植するための良い出発点であるためですが、これが良いアイデアかどうかはわかりません。

Flashが表示オブジェクトを実装する方法が本当に気に入っているので、ツールをご存知の場合はお知らせください。

4

1 に答える 1

2

あなたはあなたが説明していることにSVGを使うことができます/使うべきです。

デモ： http： //jsfiddle.net/mNAd3/

var svgNS = 'http://www.w3.org/2000/svg',
    svg   = document.body.appendChild(document.createElementNS(svgNS,'svg'));

var l = document.createElementNS(svgNS,'line');
line.setAttribute('x1',10); line.setAttribute('y1',50);
line.setAttribute('x2',30); line.setAttribute('y2',150);

var g = svg.appendChild(document.createElementNS(svgNS,'g'));
g.appendChild(l);

var bbox = g.getBBox();
console.log(bbox);
// SVGRect:
//   height: 100
//   width: 20
//   x: 10
//   y: 50

var w = bbox.width;

バウンディングボックスを計算するには、要素が画面に表示されていることを確認する必要があることに注意してください（SVGをドキュメントに追加し、グループをSVGに追加します）。

非同期で読み込まれるリソースでは、画像が読み込まれるのを待つハンドラーを設定する必要があるため、意図的に画像を作成する例は含めませんでしloadた。デモをこれらの詳細で複雑にしたくありませんでした。

SVGは保持モードのグラフィックAPIであるため、オブジェクトのサイズに関する概念があり、マウスイベントを追跡および処理できます。これは、HTML5キャンバスには当てはまりません（イミディエイトモードのグラフィックAPIであるため）。

于 2012-05-24T20:43:55.573 に答える