将画布元素绑定到新元素

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'));

另见

• DartPad example
• extendTag in Dart custom element