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。都失败了。

我的下一步应该是尝试使用模式，但我不确定是否可以在 Dart 中翻译我为 javascript 阅读的内容。

编辑：能够加载图像也很好，这样我就可以读取尺寸等属性。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 之前该事件不会触发。您应该在创建元素后添加图像。您也可以设置display: none并更改为display: autoonLoad 触发的时间。

于 2014-01-12T16:04:32.090 回答