JointJS中如何實現圖形的交互功能

在JointJS中，實現圖形的交互功能主要通過監聽和處理事件來實現。以下是一個簡單的示例：

// 創建一個圖形元素
var rect = new joint.shapes.basic.Rect({
    position: { x: 100, y: 30 },
    size: { width: 100, height: 40 },
    attrs: { rect: { fill: 'blue' }, text: { text: 'Hello', fill: 'white' } }
});
// 將圖形元素添加到圖形畫布上
graph.addCell(rect);
// 監聽圖形元素的點擊事件
rect.on('click', function() {
    console.log('矩形被點擊了');
});
// 監聽圖形元素的鼠標移入事件
rect.on('mouseover', function() {
    console.log('鼠標移入了矩形');
});
// 監聽圖形元素的鼠標移出事件
rect.on('mouseout', function() {
    console.log('鼠標移出了矩形');
});

在這個示例中，我們創建了一個矩形圖形元素，并將其添加到圖形畫布上。然后，我們分別監聽了矩形的點擊、鼠標移入和鼠標移出事件，并在事件觸發時輸出相應的信息。