以编程方式访问 Raphael 路径

Question

我正在绘制拉斐尔路径并使用“eye.node.id”为它们分配一个 ID。我正在尝试有问题地获取 id 以使用以下方法更改颜色：

             `var selectedBodyPart = p.getById(1001);
             selectedBodyPart.attr('fill', 'blue');`

但是不行。我的 fiddle 是： http://jsfiddle.net/RaoBurugula/okgdtzzh/3/ 注意：我已经添加了 jquery 参考，但仍然 consol 给我一个错误 "Uncaught ReferenceError: $ is not defined"

HTML

       <div id="bodyMapContainer">
       </div>

JS

        //RAPAEL PAGE
       width = 700;
      height = 900;
      var bodyMapContainer = document.getElementById("bodyMapContainer");
      var p = Raphael(20,0,width,height);
      //var p = Raphael(bodyMapContainer,"100%","100%");
      p.rect(0,0,width,height);
      p.setViewBox(0,0,width,height,true); 
      drawEyes(150,45, 11, "Left Eye");
      drawEyes(129,46, 11, "Right Eye");

      //ID for the eyes
      var eyeId = 1000;
      selectEye();

      function drawEyes(xCoordinate,yCoordinate, radius, bodyPartName){
          var eye = p.circle(xCoordinate,yCoordinate, radius);   
          eyeId ++;
          eye.node.id= eyeId;
          eye.title=bodyPartName;
          eye.attr ("stroke", "#F3F3FE");
          eye.hover(hoverIn, hoverOut);
          eye.click(bodyPartClicked);
          eye.attr('fill', 'red');
      }

      // Hover in function
      function hoverIn() {

          this.attr('fill', 'green');
          console.log($(this).attr('id'));
      }

      // Hover out function
      function hoverOut() {

          this.attr('fill', 'red');
      }

      function bodyPartClicked(){
          var selectedBodyPart =   $(this).attr('title');
          console.log($(this).attr('title'));
          console.log($(this).attr('id'));
      }

      function selectEye(){
          var selectedBodyPart = p.getById(1001);
          selectedBodyPart.attr('fill', 'blue');
      }

Answer 1

这里有 2 个问题，一个与 fiddle 有关，两个与代码有关。

fiddle 问题，只是没有可加载的 jquery，所以我将其添加到 lhs 上的 jsfiddle 本身。

对于代码，问题是你在定义

 var eyeId = 1000;

调用 drawEyes() 后，它会使用它们。

同样对于 id，使用

    eye.id= eyeId;

而不是使用节点

交换它们，它应该工作。

例如jsfiddle

以编程方式访问 Raphael 路径

Access Raphael path programmatically

javascript

jquery

raphael