如何在Graphiti.js的矩形上添加點擊事件

Question

我想在graphiti的矩形上註冊點擊事件。我試過這個

var innerrect = new graphiti.shape.basic.Rectangle(100, 20); 
     innerrect.onClick = function(){ 
      alert("Hi"); 
     } 
rect.addFigure(innerrect , new graphiti.layout.locator.BottomLocator(rect)); 
canvas.addFigure(rect, 100, 100); 

但不會工作。讓我知道毗鄰嗎？

Answer 1

像這樣創建自己的形狀從Rectangle繼承。 這看起來有點不舒服，但通常你會用自己的形狀寫出很多自定義代碼。在這種情況下，創建一個新班級是一次努力。

請記住，這些例子是一個很好的起點。還有一個點擊事件偵聽器的例子。

MyFigure = graphiti.shape.basic.Rectangle.extend({ 

NAME : "MyFigure", 

init : function() 
{ 
    this._super(); 

    this.createPort("output"); 
    this.setDimension(30,30); 
    this.setResizeable(false); 

    this.value=false; 

    this.colors={}; 
    this.colors[true]="#00f000"; 
    this.colors[false]="#f00000"; 

    this.setBackgroundColor(this.colors[this.value]); 
}, 

/** 
* @method 
* Change the color and the internal value of the figure. 
* Post the new value to related input ports. 
* 
*/ 
onClick: function(){ 
    this.value = !this.value; 
    this.setBackgroundColor(this.colors[this.value]); 

    var connections = this.getOutputPort(0).getConnections(); 
    connections.each($.proxy(function(i, conn){ 
     var targetPort = conn.getTarget(); 
     targetPort.setValue(this.value); 
     conn.setColor(this.getBackgroundColor()); 
    },this)); 
} 

});