Question

我想用dart创建我自己的元素继承画布。

这是我的HTML代码：

 <x-canvas> </x-canvas>

这是我的DART代码：

class XCanvas extends HtmlElement with CanvasElement{

    int myOwnProperty = 1;

    XCanvas.created() : super.created(){

    }

}

void main(){
    document.registerElement("x-canvas", XCanvas);

    var ctx = query("x-canvas").getContext('2d'); // ctx from x-canvas element
}

发生错误：

main.dart:23 Exception: 'package:mypackage/main.dart': error: line 38 pos 2: constructor 'CanvasElement.internal_' is illegal in mixin class CanvasElement
}
 ^
'package:mypackage/main.dart': error: line 11 pos 37: mixin class 'CanvasElement' must not have constructors
class XCanvas extends HtmlElement with CanvasElement{
                                ^

Answer 1

自定义元素的类应为

import 'dart:html';

class XCanvas extends CanvasElement{
  int myOwnProperty = 1;

  XCanvas.created() : super.created();
}

并将其注册为

document.registerElement("x-canvas", XCanvas, extendsTag: 'canvas');

要创建实例，请使用

<canvas is="x-canvas"></canvas>

或

var anchor = querySelector('#anchor');
anchor.append(new Element.tag('canvas', 'x-canvas'));

另见

将canvas元素绑定到新元素

1 个答案: