0

这是代码：

Raphael('holder', 400, 400, function() {
    this.circle(200, 200, 100)
    this.circle(200, 200, 140)

    this.circle(0, 0, 1).translate(300, 200).scale(10).attr({fill: 'green'})
    this.circle(300, 200, 5).attr({fill: 'red'})
    this.path('M300,200 L400, 200').attr({stroke: 'red', 'stroke-width': 3})
    this.path('M0,0 L1,0').attr({stroke: 'blue'}).translate(300, 200).scale(100, 100)
})

这是 Chrome 中的结果：

这是 Chrome 中的结果

请注意，蓝线M0 0不在 300,200 处！

我期望的是这两条路径会重合。当我translate(300, 200)预计这M0, 0会将笔放在 300,200 时。但它没有！它将笔放置在其他位置，使得生成路径的中心最终达到 300,200。

那么，我怎样才能M0 0在纸上创建一条路径并将其定位？

（或者，我是否必须计算路径的中心并将所有路径值偏移该中心？请不要说“是”）

4

2 回答 2

2

您的问题是您.scale(100, 100)在蓝线上使用从 (300, 200) 的中心点在两个方向上水平调整整条线的大小；

只需将您的最后一行替换为：

this.path('M0,0 L100,0').attr({stroke: 'blue'}).translate(300, 200);

让蓝线覆盖红线

这是解决方案的小提琴：http: //jsfiddle.net/QfAsY/

于 2012-06-19T19:59:34.907 回答
1

您可以使用 center 进行缩放，解决方案也是如此scale(100, 100, 0, 0)。

于 2012-06-20T01:11:10.423 回答