Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/437.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何在Graphiti.js中添加矩形上的单击事件_Javascript_Graphiti Js - Fatal编程技术网

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

Javascript 如何在Graphiti.js中添加矩形上的单击事件,javascript,graphiti-js,Javascript,Graphiti Js,我想在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.a

我想在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);   

但这行不通。请让我知道它是什么?

像这样创建从矩形继承的自己的形状。 这看起来在第一刻有点不合适,但通常你会这样写 使用大量自定义代码创建您自己的形状。在这种情况下,创建一个新类是一次性的

请记住,这些示例是一个很好的起点。还有一个示例,其中还包含一个单击事件侦听器

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

});