在RaphaelJS中,如何在路径中的各个节点之间移动?

时间:2016-09-21 00:29:27

标签: javascript raphael

是否有包含这些的数组?

此外,是否也可以在现有路径中添加节点?

1 个答案:

答案 0 :(得分:0)

您需要编辑路径。不,没有数组,只有路径字符串。您当然可以编写更高级别的代码来保存数组中节点的轨迹,从中生成路径字符串。

一个简单的实现类似于:

//////////////////////////////////////////////

const SmartComponentA = (props) => {
  console.log('rendering SmartComponentA');

  return <DumbComponentB bData={props.bData} />;
};

const mapStateToProps = (state) => { bData: state.bData };

export default connect(mapStateToProps)(SmartComponentA);

//////////////////////////////////////////////

const DumbComponentB = (props) => {
  console.log('rendering DumbComponentB');

  return (
    <div>
      {props.bData}
      <SmartComponentC />
    </div>
  );
}

export default DumbComponentB;

//////////////////////////////////////////////

const SmartComponentC = (props) => {
  console.log('rendering SmartComponentC');

  return (
    <div>
      <input value={props.cValue} onChange={props.changeCValue} />
    </div>
  );
}

const mapStateToProps = (state) => { cValue: state.cValue };

export default connect(mapStateToProps, { changeCValue })(SmartComponentC);
//////////////////////////////////////////////

然后你会这样做:

function Polygon (nodes) {
    if (nodes instanceof Array) this.nodes = nodes;
    else this.nodes = [];
}

Polygon.prototype.draw = function () {
    var path = "M" + this.nodes[0][0] + "," + this.nodes[0][1];
    for (var i=1; i<this.nodes.length; i++) {
        path += "L" + this.nodes[i][0] + "," + this.nodes[i][1];
    }
    path += "Z";
    return path;
}

当然,您可以使用您实施的API更具创意。例如,var p = new Polygon([[100,100],[100,200],[200,200],[200,100]]); var pp = paper.path(p.draw()); // Modify node: p.nodes[2] = [300,300]; pp.attr('path',p.draw()); // Add node: p.nodes.push([250,150]); pp.attr('path',p.draw()); 可以自动更新链接的Raphael元素。上面的代码只是一个基本概念的简单例子。