在拉斐尔2.0中使路径的一侧可以拖延

时间:2012-03-08 21:33:46

标签: raphael

我正在阅读JSON文件和foreach元素我正在创建一个路径和一个圆圈。我需要用圆圈拖动路径。路径终止于圆心的精确x,y坐标。我只希望路径的圆端用圆圈拖动。路径的另一端是固定的。

我已经为圈子拖动了工作但它没有为路径做任何事情。我发布的代码是愚蠢的,不包含定位圈的智能。我只需要拖动路径的一端帮助。我的脚本正在阅读JSON,并在正确的坐标处用圆圈和路径绘制画布。在此先感谢您的帮助。

我没有答案需要额外的插件。

<script type="text/javascript">

$.getJSON('jsonScript.php?view=json', function( json ){

 var start = function () {
       this.ox = this.attr("cx");
       this.oy = this.attr("cy");
       this.animate();
     },
     move = function (dx, dy) {
             this.attr({cx: this.ox + dx, cy: this.oy + dy});
     },
     up = function () {
             this.animate();
  };

  var paper = Raphael( canvas.leftMargin, canvas.topMargin, canvas.width, canvas.height );

  $.each( json, function( a , z ) {

    var circleObj = paper.circle( x, y, radius );
    circleObj.attr({"fill":"black","stroke":"red","stroke-width":5});
    circleObj.node.id = jsonVar;

    var pathObj = paper.path( "M396,16L641,187" );
    path.attr({"stroke":"#fdfdfd","stroke-width":3}).toBack();

    paper.set( circleObj, pathObj ).drag( move, start, up ) 

  });
});

</script>

1 个答案:

答案 0 :(得分:2)

您可以将path附加到circleObject,只需在.each块中分配即可...

$.each(json, function(a, z) {
  ...
  circleObject.path = path;
});

这样你就可以在开始,向上和移动功能中访问它......

 move = function (dx, dy) {
         this.path.attr(path)[1][1] = this.ox + dx;
         this.path.attr(path)[1][2] = this.oy + dy;
 },