Question

我使用JS类的下面的JS代码，在不同的随机位置生成了多个矩形，静态矩形在单击时开始移动，如果单击，则移动矩形将被销毁。

我想用Dart语言重写相同的代码，我不知道在dart中我应该使用什么代替JS myRect.prototype，考虑到我不想在内部包含所有的类属性和函数主要class { }任何想法？

var NS="http://www.w3.org/2000/svg";     
var SVG=function(h,w){
    var svg=document.createElementNS(NS,"svg");
    svg.width=w;
    svg.height=h;
return svg;
}
var svg=SVG(1200,1500);
document.body.appendChild(svg);

class myRect {
  constructor(x,y,h,w,fill,name) {
   this.name=name;
   this.SVGObj= document.createElementNS(NS,"rect");
   self = this.SVGObj;
      self.x.baseVal.value=x;
      self.y.baseVal.value=y;
      self.width.baseVal.value=w;
      self.height.baseVal.value=h;
      self.style.fill=fill;
      self.addEventListener("click",this,false);
  }
}

Object.defineProperty(myRect.prototype, "draw", {
   get: function() {
      return this.SVGObj;
   }
});

myRect.prototype.handleEvent= function(evt){
self = this.SVGObj;
  switch (evt.type){
    case "click":   
       if (typeof self.moving == 'undefined' || self.moving == false) self.moving = true;
       else self.moving = false;

     if(self.moving == true)
       self.move = setInterval(()=>this.animate(),100);
       else{
       clearInterval(self.move); 
       self.parentNode.removeChild(self);
       }        
    break;
    default:
    break;
 }
}  

myRect.prototype.step = function(x,y) {
   return svg.createSVGTransformFromMatrix(svg.createSVGMatrix().translate(x,y));
}

myRect.prototype.animate = function() {
       self = this.SVGObj;
              self.transform.baseVal.appendItem(this.step(1,1));
};

for (var i = 0; i < 100; i++) {
    var x = Math.random() * 500,
        y = Math.random() * 300;

    var r= new myRect(x,y,10,10,'#'+Math.round(0xffffff * Math.random()).toString(16),'this is my name');
    svg.appendChild(r.draw);
}

Answer 1

您无法在Dart中动态地向类或对象添加方法。您的选择是：

将它们放入课堂
制作以矩形作为参数的函数

我会选择（2），只需使它们成为接受你班级实例的函数：

>> ps.p5

ans =

      0.42137
      0.57863

Dartlang类VS JavaScript类

1 个答案: