Блог

Я хочу определить объект для использования в виджетах JSXGraph, который может быть активирован или деактивирован при щелчке мыши (пока просто переключение видимости и «фиксированное» свойство).

Я определил методы активации() и деактивации(). Они могут быть вызваны из метода конструктора (для задания начального состояния в зависимости от параметров). Тем не менее, я не могу привязать методы к событию мыши.

Есть идеи, что может вызвать проблему или как правильно решить задачу?

      this.graph = board.create('functiongraph' [ 
       JXG.Math.Numerics.hermitePolynomial(this.p1, this.p2, this.pt1, this.pt2, 
         this.t1, this.t2),
       this.p1.X(), this.p2.X() ],
       { strokecolor: 'red', strokewidth: 3 });
    // set activate/deactivate, this works
    this.obj = [ this.p1, this.p2, this.pt1, this.pt2, this.t1, this.t2 ];
    if (this.state == "active") { this.activate() }
    else {this.deactivate() }
    
    //switch by mouseclick, this doesn't work
    this.graph.on('down', function() {
      if (this.state == "active") { 
        console.log("deactivate", this.obj); this.deactivate(); }
      else {  console.log("activate"); this.activate(); }
      } )
  }
  activate() {console.log("activate"); this.state = "active";
        for (var part of this.obj) {
          part.setAttribute({visible:true});
          part.setAttribute({fixed:false});
        } update()}
  deactivate() {console.log("deactivate"); this.state = "inactive";
        for (var part of this.obj) {
          part.setAttribute({visible:false});
          part.setAttribute({fixed:true});
        } update()}
 

В примере красные сплайны справа должны переключаться щелчком мыши.

Тем не менее, щелчок по ним приводит к ошибке

Неперехваченная ошибка типа: this.activate не является функцией

Я этого не понимаю, потому что методы могут быть успешно вызваны непосредственно выше в коде.

полный пример на jsfiddle

Я сам нашел решение. Проблема заключалась в том, что «это» в привязке мыши относится к объекту, к которому применяется привязка. В данном случае это графический объект.

Если я хочу получить доступ к методам родительского объекта, я могу определить родительское свойство этого объекта и получить доступ к методу с помощью «this.parent.method ()».

Возможно, я реализовал его несколько усложненным, но сейчас он работает.

 this.graph = board.create('functiongraph', [hermiteplot(this.P,this.p1, this.p2, this.pt1, this.pt2), this.p1.X(), this.p2.X()], { strokecolor: 'red', strokewidth: 3  });
    // set activate/deactivate
        this.obj = [ this.p1, this.p2, this.pt1, this.pt2 ];
    if (this.state == "active") { this.activate(this) }
    if (this.state == "inactive") { this.deactivate(this) }
    if (this.state == "locked") { this.deactivate(this); this.state = "locked" }
    
    //switch by doubleclick
    this.graph.parent = this;
    this.graph.lastclick = Date.now();    
    this.graph.on('up', function() {
      if (Date.now()-this.lastclick < 500) {console.log(this.parent.state); this.parent.switch()}
      else {this.lastclick = Date.now() }})
  }
  switch() {if (this.state == "active") { this.deactivate(this)}
      else if (this.state == "inactive") { this.activate(this);}
      console.log(this.state)}
  activate(ref) {console.log("this.activate()"); ref.state = "active";
        for (var part of ref.obj) {
          part.setAttribute({visible:true});
          part.setAttribute({fixed:false});
        } update()}
  deactivate(ref) {console.log("this.deactivate()"); ref.state = "inactive";
        for (var part of ref.obj) {
          part.setAttribute({visible:false});
          part.setAttribute({fixed:true});
        } update()}
 

jsfiddle