라파엘 원에 ID 추가하기

Question

라파엘과 함께 드래그 커 버를 만들려고합니다.

이 찾아주십시오

r.circle(x, y, 6).attr({ 
       fill: "#ff0000", 
       stroke: "none", 
       id: "cir1" 
      }), 

이 내 코드입니다 : 나는 각 원에 id를 추가하려고

$(document).ready(function() { 
var r = Raphael("holder", 1583, 600), 
    discattr = { 
     fill: "#ff0000", 
     stroke: "none" 
    }; 
r.rect(9950, 9990, 6199, 4199, 9910, 777777777777).attr({ 
    stroke: "#000000" 
}); 
r.text(310, 20, "").attr({ 
    fill: "#fff", 
    "font-size": 16 
}); 

function curve(x, y, ax, ay, bx, by, zx, zy, color) { 
    var path = [["M", x, y], ["C", ax, ay, bx, by, zx, zy]], 
     path2 = [["M", x, y], ["L", ax, ay], ["M", bx, by], ["L", zx, zy]], 
     curve = r.path(path).attr({ 
      stroke: color || Raphael.getColor(), 
      "stroke-width": 4, 
      "id": "path" 
     }), 
     controls = r.set(
     r.path(path2).attr({ 
      stroke: "#000000", 
      id: 'path' 
     }), r.circle(x, y, 6).attr({ 
      fill: "#ff0000", 
      stroke: "none", 
      id: "cir1" 
     }), r.circle(ax, ay, 6).attr({ 
      fill: '#ff0000', 
      stroke: 'none', 
      'id': 'cir2' 
     }), r.circle(bx, by, 6).attr({ 
      fill: "#ff0000", 
      stroke: "none", 
      id: "cir3" 
     }), r.circle(zx, zy, 6).attr({ 
      fill: "#ff0000", 
      stroke: "none", 
      id: "cir4" 
     })); 
    t = false; 
    controls[1].update = function(x, y) { 
     var X = this.attr("cx") + x, 
      Y = this.attr("cy") + y; 
     this.attr({ 
      cx: X, 
      cy: Y 
     }); 
     path[0][1] = X; 
     path[0][2] = Y; 
     path2[0][1] = X; 
     path2[0][2] = Y; 
     t = false; 
     controls[2].update(x, y); 
    }; 
    controls[2].update = function(x, y) { 
     var X = this.attr("cx") + x, 
      Y = this.attr("cy") + y; 
     this.attr({ 
      cx: X, 
      cy: Y 
     }); 
     path[1][1] = X; 
     path[1][2] = Y; 
     path2[1][1] = X; 
     path2[1][2] = Y; 
     t = false; 
     curve.attr({ 
      path: path 
     }); 
     controls[0].attr({ 
      path: path2 
     }); 
    }; 
    controls[3].update = function(x, y) { 
     var X = this.attr("cx") + x, 
      Y = this.attr("cy") + y; 
     this.attr({ 
      cx: X, 
      cy: Y 
     }); 
     path[1][3] = X; 
     path[1][4] = Y; 
     path2[2][1] = X; 
     path2[2][2] = Y; 
     t = false; 
     curve.attr({ 
      path: path 
     }); 
     controls[0].attr({ 
      path: path2 
     }); 
    }; 
    controls[4].update = function(x, y) { 
     var X = this.attr("cx") + x, 
      Y = this.attr("cy") + y; 
     this.attr({ 
      cx: X, 
      cy: Y 
     }); 
     path[1][5] = X; 
     path[1][6] = Y; 
     t = false; 
     path2[3][1] = X; 
     path2[3][2] = Y; 
     controls[3].update(x, y); 
    }; 
    controls.drag(move, up); 
    t = false; 
} 

function move(dx, dy) { 
    this.update(dx - (this.dx || 0), dy - (this.dy || 0)); 
    this.dx = dx; 
    this.dy = dy; 
    t = false; 
} 

function up() { 
    this.dx = this.dy = 0; 
    t = false; 
} 
// curve(70, 100, 80, 100, 130, 154, 170, 200, "hsb(0, .75, .75)"); 
curve(100, 100, 100, 100, 100, 100, 100, 100, "#ff0000"); 
}); 

하지만 어떤 이유로 작동하지 않습니다.

Answer 1

element.data() function을 사용하여 사용자 지정 ID와 같은 기타 데이터를 추가 할 수 있습니다. 서클 코드 스 니펫은 다음과 같을 수 있습니다.

r.circle(x, y, 6).attr({ 
    fill: "#ff0000", 
    stroke: "none" 
}).data("id": "cir1"),