使用画布(canvas)翻译一个元素

Question

我正在尝试通过实现饼图来学习画布。我已经成功解析了我的数据，绘制了切片，并计算了每个弧的中心，如黑色圆圈所示。但现在我想绘制其中一个切片，就好像它被“滑出”一样。不要动画（尚未），只是简单地绘制切片，就好像它被滑出了一样。

我认为最简单的方法是首先计算新角落应该在哪里的点（用红色X手绘），然后将其翻译过去，绘制我的切片，然后将原点翻译回来。我认为我可以轻松地计算这个，因为我知道饼图的中心和弧的中心点（用米色切片上连接的自由手画的黑线连接）。但在this question之后，似乎这将涉及到解决一个方程组，其中一个是二阶的。这在纸上很容易，但在JavaScript中却非常困难。

有更简单的方法吗？我应该退一步并意识到做这件事实际上与做XYZ是一样的吗？

我知道我没有提供任何代码，但我只是在寻找想法/伪代码。(jQuery标记在这个机会很小的情况下，可能有一个插件会在这个努力中有所帮助)

- Adam Rackis

Answer 1

获取翻译的x和y坐标非常简单。

// cx and cy are the coordinates of the centre of your pie
// px and py are the coordinates of the black circle on your diagram
// off is the amount (range 0-1) by which to offset the arc
//      adjust off as needed.
// rx and ry will be the amount to translate by

var dx = px-cx, dy = py-cy,
    angle = Math.atan2(dy,dx),
    dist = Math.sqrt(dx*dx+dy*dy);
rx = Math.cos(angle)*off*dist;
ry = Math.sin(angle)*off*dist;

将其插入Simon Sarris提供给您的代码中，然后就完成了。我建议off值为0.25。

- Niet the Dark Absol

---

我假设 off 的值为 0.5，会将它恰好放置在饼图中心和黑点之间的正中央？ - Adam Rackis

你的代码里有错别字吗？我得到了非常小的值，比如0.01，这是rx和ry的确切值：http://jsfiddle.net/tnE87/ - Adam Rackis

rx += cx; ry += cy; 看起来这就是我需要的。 - Adam Rackis

rx和ry是要平移的量，因此将cx和cy相加以获得新的中心是正确的。 - Niet the Dark Absol

是的，抱歉，你在评论中已经提到了。哥们儿，非常感谢你的帮助。我看到你设计游戏，这也解释了你为什么这么懂三角函数 :) - Adam Rackis

三角函数在游戏设计中非常重要，是的。说实话，我经常使用它们，尤其是与波浪有关的任何事情？sin和cos都可以解决。话虽如此，我仍在努力学习三维三角函数......如果我想开始制作三维游戏，这是必须要做到的。 - Niet the Dark Absol

Answer 2

在画布上仅翻译一个元素非常容易，这里不应该有任何棘手的方程式。在最基本的意义上，它是：

ctx.save();
ctx.translate(x, y);
// Draw the things you want offset by x, y
ctx.restore();

这是一个简单的正方形饼图示例，其中四个“片段”中的一个被翻译：

http://jsfiddle.net/XqwY2/

。要使饼图片段“滑出”，你需要计算的唯一一件事情就是你想让它离开多远。在我的简单示例中，蓝色块向外滑动了 10, -10。

如果你只是想知道如何首先获得所需的X和Y，那么这不是一个完全的javascript/canvas问题。对于给定距离上的线上点的问题，这个问题：Finding points on a line with a given distance 似乎最清晰。

编辑，以下是来自评论的内容：

  // Center point of pie
  var x1 = 100;
  var y1 = 100;

  // End of pie slice (your black dot)
  var x2 = 200;
  var y2 = 0;

  // The distance you want
  var distance = 3;

  var vx = x2 - x1; // x vector
  var vy = y2 - y1; // y vector
  var mag = Math.sqrt(vx*vx + vy*vy); // length
  vx = mag/vx;
  vy = mag/vy;

  // The red X location that you want:
  var px = x1 + vx * ( distance);
  var py = y1 + vy * ( distance);

对于我编造的输入，这将为您提供(px,py)坐标值(104.24, 95.76)。

- Simon Sarris

---

是的，我确实想知道如何获取 x 和 y。这是一个数学问题，但任何在画布中做过类似事情的人都可能见过这个。 - Adam Rackis

已经有很多关于这个问题的解答了，例如：https://dev59.com/v3I-5IYBdhLWcg3wio9k 但如果您需要一个代码示例，我可以提供一个。 - Simon Sarris

我不需要代码示例，只需要一个算法 - 我认为这个问题会回答。 - Adam Rackis

感谢您的帮助。我无法完全让它工作，但我为您的时间投入了额外的+1 - 再9个就可以达到10K :) - Adam Rackis