如何在Graphiti.js中添加矩形上的点击事件

How to add click event on rectangle in Graphiti.js

本文关键字：事件 添加 Graphiti js      更新时间：2023-09-26

我想在石墨中的矩形上注册点击事件。我试过这个

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

但不起作用。请让我知道吧？

像这样创建从矩形继承的自己的形状。这在第一刻看起来有点不舒服，但你写得很正常您自己的形状与许多自定义代码。在这种情况下，装入一个新类是一次性的工作。

请记住，这些例子是一个很好的起点。还有一个关于点击事件监听器的例子。

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));
}
});
相关文章：