person.translate(x, y) 在 Raphael.js 中没有正确映射答案

【问题标题】：person.translate(x, y) not mapping correctly in Raphael.jsperson.translate(x, y) 在 Raphael.js 中没有正确映射
【发布时间】：2012-07-07 16:11:00
【问题描述】：

我有一个 nodejs 应用程序，它获取用户的 IP 地址并根据用户的纬度/经度位置将其转移到 raphael 地图上。

你可以在这里看到它http://zmgc.net/;maps 如果你打开一个新标签并访问 ;maps 页面中的http://zmgc.net 主页，你应该会得到一个居中的红色人 svg。

奇怪的是，城市和“用户标题”显示正确，但人却呈现在地图中间！

这是绘制人物标记的代码：

  this.drawMarker = function (message) {
    var latitude = message.latitude,
        longitude = message.longitude,
        text = message.title, //Fixme, this is the user's name
        city = message.city,
        x, y;

    var mapCoords = this.geoCoordsToMapCoords(latitude, longitude);
    x = mapCoords.x;
    y = mapCoords.y;

    var person = self.map.path(personPath);
    person.scale(0.06, 0.06);
    person.translate(-255, -255); // Reset location to 0,0
    person.translate(x, y);
    console.log(x, y);
    person.attr({
      fill: 'red',
      stroke: 'transparent'
    });

    var title = self.map.text(x, y + 11, text);
    title.attr({
      fill: 'red',
      "font-size": 12,
      "font-family": "'Helvetica Neue', 'Helvetica', sans-serif",
      'font-weight': 'bold'
    });
    var subtitle = self.map.text(x, y + 21, city);
    subtitle.attr({
      fill: '#999',
      "font-size": 7,
      "font-family": "'Helvetica Neue', 'Helvetica', sans-serif"
    });

完整代码是https://github.com/nkhine/phoenix/blob/master/ui/core/js/node/public/client.js

非常感谢任何建议。

【问题讨论】：

你能在 jsfiddle 上放一个例子，这样我们就可以玩了吗？
你需要nodejs，所有代码都在github.com/nkhine/phoenix/blob/master/ui/core/js/node，把那个文件夹复制到你的本地目录然后运行% node server.js
你还需要手动创建 index.html 页面并将它放在 /public 目录中，因为这是我的 cms 目前构建的

标签： raphael

【解决方案1】：

先平移再缩放，因为 scale() 会影响后面的 translate()

所以在代码中是：

var person = self.map.path(personPath);
person.translate(-255, -255); // Reset location to 0,0
person.translate(x, y);
console.log(x, y);
person.scale(0.06, 0.06);
person.attr({
  fill: 'red',
  stroke: 'transparent'
});

但正确的解决方案应该是移动路径本身，而不是转换其坐标系。这里用一个例子来解释： http://cancerbero.vacau.com/raphaeltut/#sec-types-path-moving

【讨论】：