在 Raphael 2.0 中使路径的一侧可拖动

问题描述

我正在读取一个 JSON 文件并为每个元素创建一个路径和一个圆圈.我需要使路径与圆圈一起拖动.路径终止于圆心的精确 x,y 坐标.我只希望路径的圆圈末端与圆圈一起拖动.路径的另一端是固定的.

I am reading a JSON file and foreach element I am creating a path and a circle. I need to make the path drag with the circle. The path terminates at the exact x,y coordinates of the circle center. I only want the circle end of the path to drag with the circle. The other end of the path is fixed.

我为圆圈拖拽工作，但它对路径没有做任何事情.我已经发布了简化的代码，并且不包含定位圆圈的智能.我只需要帮助拖动路径的一端.我的脚本正在读取 JSON 并在正确的坐标处用圆圈和路径绘制画布.预先感谢您的帮助.

I have drag working for the circles but it is not doing anything for the paths. I have posted code that is dumbed down and does not contain the intelligence for positioning circles. I only need help with dragging one end of the path. My script is reading the JSON fine and painting the canvas with circles and paths at the correct coordinates. Thanks in advance for your help.

我不回答需要额外插件的问题.

I do not answers that require an additional plug in please.

<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>

推荐答案

您可以将 path 附加到 circleObject，只需在您的 .each 块中分配它...

You can attach path to circleObject by just assigning it within your .each block...

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

这样您就可以从开始、向上和移动功能中访问它...

This way you can access it from within the start, up and move functions...

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

这篇关于在 Raphael 2.0 中使路径的一侧可拖动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！