［JavaScript］Can’t remove connection in Raphaël's graffle demo.

2011-11-23

我實在是太蝦了, 所以一定要寫一篇來做警惕.

兩個圖示物件, 用Raphaël's graffle demo的javascript

然後寫了這段code, 當使用者點在線上時, 希望能夠移除該線條

   1:  var paper = Raphael("holder", 1024, 768);

   2:  var rect1 = paper.rect(290, 80, 60, 40, 10);

   3:  var rect2 = paper.rect(90, 80, 60, 40, 10);

4:

   5:  var conn = paper.connection(rect1, rect2, '#000', '#000|2');

6:

   7:  conn.line.click(function(){ this.remove(); });

結果: 線條依舊在?! 但已經無法再點了(event already remove)?!

花了一個上午找這個bug ...

終於找到是建構式第4個參數造成, 第四個參數是 bg,

bg 就是背景, demo 實作的方式是用另一條線 Orz,

   1:  bg: bg && bg.split && this.path(path).attr({ stroke: bg.split("|")[0], fill: "none", "stroke-width": bg.split("|")[1] || 3 }),

   2:  line: this.path(path).attr({ cursor: 'pointer', stroke: color, fill: "none" }),

所以當我移除了line後, bg還是一直在 ... 所以有線條依舊在的假相, 也矇閉了我除錯的方向. 眼見不一定為憑呀!!

ps. code改成這樣就行了-

   1:  if(conn.bg) conn.bg.remove();

   2:  conn.line.remove();