我想在同一个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"}); };我期待的结果是这样的
------ ------ | |_______| | | | | | ------ ------但我得到的东西是这样的
------ ------ | ___|_______| | | | | | ------ ------（请忽略我的全局变量 - 我正在尝试在控制台中调试，我需要它们在全局范围内）
I'm trying to draw 3 rectangles on the same y-axis. Each of the rectangles are to be connected by a line.
The rectangles are appearing as I'd like but I can't get the line to appear in the right spot
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"}); };The result I'm expecting is something like
------ ------ | |_______| | | | | | ------ ------but I'm getting something like this
------ ------ | ___|_______| | | | | | ------ ------(please ignore my global variables - I'm trying to debug in console and I need them in the global scope)
最满意答案
你看，问题是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')); ...看到这里的小提琴
You see, the problem is that Horizontal Line command takes only one parameter (docs). As your helper function always provides two parameters, after function evaluation you end up with something like this:
paper.path('M70,30H110,30');
Which obviously does not correspond to expected input.
You could change your helper functions to generate something like this:
paper.path('M70,30H110');
But in this case simplest solution is to use Line To command instead of Horizontal Line command (change H to L). Line To takes two arguments. So you would end up with something like this:
paper.path('M70,30L110,30');
In your code sample just change H to L.
... paper.path(p1.toPath('M') + p2.toPath('L')); ...See the fiddle here
更多推荐
发布评论