0

後で操作する楕円やその他のさまざまなものの背景として（交換可能な）画像を表示しようとしています。問題は、画像を適切にロードする方法が見つからないことです。

私のコード:

DivElement div = querySelector("#mainDiv");
svg.SvgElement svgElement = new svg.SvgSvgElement();
div.append(svgElement);
//div.setAttribute("background-color", "yellow");

svg.RectElement rec = new svg.RectElement();
rec.setAttribute("x", "0");
rec.setAttribute("y", "0");
rec.setAttribute("width",div.clientWidth.toString());
rec.setAttribute("height", div.clientHeight.toString());
//svgElement.children.add(rec);  

Ellipse ell = new Ellipse() //my class. shows and allow to move it
..cx = 100
..cy= 100
..rx= 50
..ry= 50;
svgElement.children.add(ell.ellipse);
ImageElement image = new ImageElement(src: "2.jpg");
image.onLoad.listen((e) {
  svgElement.children.add(image);
});

ご覧のとおり、Rectangle があります。これは、さまざまな属性 (背景画像、背景など) を使用して画像を表示する最初の試みであり、onLoad の直後に ImageElement を追加することを考えました。両方とも失敗しました。

私の次のステップは、パターンを試すことですが、JavaScript について読んだことを Dart で翻訳できるかどうかはわかりません。

編集：寸法などの属性を読み取れるように、画像もロードできるとよいでしょう。Edit2:回答を追加できないため、「重複」した元のコードを確認して作成したコードを次に示します。

import 'dart:svg' as svg;
//...
DivElement div = querySelector("#mainDiv");
svg.SvgElement svgElement = new svg.SvgSvgElement();
div.append(svgElement);

Ellipse ell = new Ellipse()
..cx = 100
..cy= 100
..rx= 50
..ry= 50;

svg.ImageElement image = new svg.ImageElement();

svgElement.children.add(image);
image.setAttribute('x', '0');
image.setAttribute('y', '0');
image.setAttribute('width', '100%');
image.setAttribute('height', '100%');
image.getNamespacedAttributes('http://www.w3.org/1999/xlink')['href'] = '2.jpg';

svgElement.children.add(ell.ellipse);
4

1 に答える 1

1

試したことはありませんがonLoad、要素がDOMに追加される前にイベントが発生しないと思います。要素を作成した直後に画像を追加する必要があります。または、onLoad が起動するタイミングを設定display: noneして変更することもできます。display: auto

于 2014-01-12T16:04:32.090 に答える