Question

我试图在同一个y轴上绘制3个矩形。每个矩形都要用一条线连接。

矩形出现在我喜欢的地方，但我无法让这条线出现在正确的位置

function Point(x,y){
    this.x=x;
    this.y=y;
}
Point.prototype.toPath = function(op) {return op+this.x+','+this.y;};

window.onload = function (){
    paper = Raphael(10, 50, 320, 200);

    paper.setStart();
    processes = [
        paper.rect(10, 10, 60, 40),
        paper.rect(110, 10, 60, 40),
        paper.rect(210, 10, 60, 40)
    ];

    p1 = new Point(
        processes[0][0].x.baseVal.value + processes[0][0].width.baseVal.value,
        processes[0][0].y.baseVal.value + (processes[0][0].height.baseVal.value / 2)
    );

    p2 = new Point(
        processes[1][0].x.baseVal.value,
        processes[1][0].y.baseVal.value + (processes[1][0].height.baseVal.value / 2)
    );

    paper.path(p1.toPath('M') + p2.toPath('H'));

    var set = paper.setFinish();
    set.attr({fill: "red"});
};

我期待的结果就像是

  ------         ------
 |      |_______|      |
 |      |       |      |
  ------         ------

但是我得到了这样的东西

  ------         ------
 |   ___|_______|      |
 |      |       |      |
  ------         ------

（请忽略我的全局变量 - 我试图在控制台中调试，我需要在全局范围内调试）

Answer 1

您看，问题是Horizontal Line命令只接受一个参数（docs）。由于你的辅助函数总是提供两个参数，在功能评估之后你最终会得到这样的结果：

paper.path('M70,30H110,30');

这显然不符合预期的输入。

您可以更改辅助函数以生成如下内容：

paper.path('M70,30H110');

但在这种情况下，最简单的解决方案是使用Line To命令而不是Horizontal Line命令（将H更改为L）。 Line To有两个论点。所以你最终会得到这样的东西：

paper.path('M70,30L110,30');

在您的代码示例中，只需将H更改为L。

...
paper.path(p1.toPath('M') + p2.toPath('L'));
...

查看小提琴here

试图绘制连接的矩形

1 个答案: