javascript - 通过 web 用jointjs画线

Question

我正在为一个小项目构建一个带有jointjs和raphael的小型uml建模器我正在做......我已经通过单击一个按钮来绘制类。

我特别想知道的是如何让onclick事件在jointjs类图上工作，因为当我点击它们不起作用的类时，当我点击它们时它们也会移动一点，如果我能让onclick工作我可能会点击对象并在背景上画线......

关于如何画线的任何其他想法......也许是从一个班级拖到另一个班级？

有人做过吗？

谢谢！

Answer 1

这是jointjs 0.6的示例代码，诀窍是使用model-id属性使用jquery选择对象：

        var rect = new joint.shapes.basic.Rect({
        position: { x: 100, y: 30 },
        size: { width: 100, height: 30 },
        attrs: { rect: { fill: 'blue' }, text: { text: 'my box', fill: 'white' } }
    });


    graph.addCells([rect]);

    //here is the trick
    $("g[model-id='" +rect.id+ "']").click(function() {
        alert("x");
    });

Answer 2

Jointjs 提供事件调用功能。您可以在纸质 div 上调用事件。这是一个例子。可能这可以帮助你。有关更多信息，请访问链接。 Paper代码示例上的触发事件列表：

paper.on('cell:pointerdblclick',function(cellView, evt, x, y) {
     demo();
  });

function demo(){
 alert("1");
}

我希望这会对你有所帮助。谢谢

Answer 3

我认为您不能将事件绑定到图表元素的 mouseclick，因为 mouseclick 事件已经被联合库本身绑定。

但是，您绝对可以绑定 mousedown/mouseup 事件来模拟点击。您可以通过单击一个元素（将关节对象放在临时变量中）然后单击另一个元素来实现连接创建 - 调用

var joint= element.joint(other_element,connection_type)

希望对您有所帮助，如果您需要更多信息，请告诉我。