画布中画线的可疑定位答案

【问题标题】：Questionable Positioning of drawn Lines in Canvas画布中画线的可疑定位
【发布时间】：2016-09-16 08:27:21
【问题描述】：

我有一些关于 HTML 5 Canvas 的问题，希望您能帮我解决。

情况：我有一个画布和一些绝对定位的 div，它们是相对定位的 div 的子级。

<div class="relativeposition">
    <canvas id="drawarea" height="700" width="800"></canvas>
    <div id="absoluteposition1"></div>
    <div id="absoluteposition2"></div>
    <div id="absoluteposition3"></div>
</div>

所以你可以看到画布，画布上有 3 个不同的 div。现在我想在每个循环中的每个 div 下绘制一个多边形。这个多边形的位置应该几乎在 div 的中心。在每个 div 下，这个位置应该等于其他 div。

红色的 caros 是定位的 div，想象一下它们在每个 div 下的相同位置。绘制这些 caros 的伪代码如下：

$.each(absolutepositionedDivs, function(index, value) {
    var divtop = absolutepositionedDiv.position().top;
    var divleft = absolutepositionedDiv.position().left;

    context.beginPath();
    context.moveTo(playerLeft + 76, playerTop + 154);
    context.lineTo(playerLeft + 46, playerTop + 174);
    context.lineTo(playerLeft + 55, playerTop + 190);
    context.lineTo(playerLeft + 97, playerTop + 190);
    context.lineTo(playerLeft + 106, playerTop + 174);
    context.lineTo(playerLeft + 76, playerTop + 154);
    context.closePath();
    context.lineWidth = 2;
    context.strokeStyle = "red";
    context.stroke();
});

canvas 的初始化等不在代码中，但我编写了它并且它有效。忽略抽签的结果不是caro...所以现在的问题是绘制的对象不在相同的位置，如下图所示：

所以我不明白为什么每个绘制的对象都有不同的位置，即使我写道它们都从 div 的相同位置开始但最终以不同的位置结束。你能告诉我为什么会发生这种情况或有一个解决方案将所有绘制的多边形放置在它们的 div 下的相同位置吗？

编辑：这是一个小提琴https://jsfiddle.net/asfga/yjjhqpyL/

【问题讨论】：

红色菱形看起来像是按比例缩放的，与您提供的代码不匹配。您必须提供更多信息。据我所知，每颗钻石都以不同的比例渲染，这可以解释为什么它们的偏移量都不同
为什么不同的比例？每个循环中的绘图导致相同的菱形，但仅在不同的位置，还是我看错了？
您提供的两张带有钻石的图片显示每颗钻石都不同。您需要提供准确的信息，包括 CSS/HTML 和实际代码，否则我们只能猜测问题所在。画布渲染没有任何问题，它每次都会在正确的像素地址处渲染。问题不是画布而是设置问题。
好的，感谢您的回复。明天我会更新css设置。希望你会更清楚
更新了它并创建了一个小提琴。部分图纸位置不对，希望您能帮帮我；）

标签： javascript jquery html canvas

【解决方案1】：

你的小提琴一团糟，所以我需要清理它......

首先，您拥有遍布 HTML、javaScript 和 CSS 的神奇数字，这是维护的噩梦。所以我把它清理了一遍，把所有的定位信息都放到了需要的地方。

这个形状是手工编码的，并且带有毫无意义的疯狂偏移。所以使形状成为一个点数组，其原点位于中心顶部。（不需要最后一点，因为您在不需要时关闭路径）。

然后删除 jquery，因为您不需要它并且您没有正确使用它，因此有效地减慢了整个页面的速度。

在代码中添加了 div，因为这比每次您想要进行更改时手动输入所有内容要容易得多。将 div 存储在数组中，这样您以后需要它们时就不必查询 DOM。

您需要画布位置。所以我是通过getBoundingClientRect 函数得到的，所以我们可以调整 div 的位置以适应画布坐标。

然后迭代每个 div 并找到它的左上角 getBoundingClientRect 减去画布左上角，从而得到该 div 的画布坐标。然后，由于我需要知道背景图像在哪里，我添加了一个函数来加载该背景图像并查询其尺寸。

那是我发现你的问题的时候。

您的背景图片是全尺寸图片，所有五边形均已绘制。它与 div 没有关系，因为您不剪辑它。除非您的 div 坐标与图像五边形位置正确匹配，否则您永远无法排列它。

您需要使用图像编辑器并找到图像上的每个五边形。将位置添加为数组并在这些位置绘制形状。

此时我放弃了，只是在画布中的文本上添加了一个矩形，以表明它已对齐。你将不得不锻炼你想要的背景图像。如果你想要整个图像，你将不得不手动找到每个五边形的坐标。如果您只想要第一个五边形，请剪切图像并将一个五边形保存为图像。然后取消注释我注释掉的背景位置规则，并将幻数偏移添加到代码中，这对于所有 div 都是恒定的。

您可以找到生成的小提琴 here，但它只会在很短的时间内出现，因为我会在您查看后将其删除。

【讨论】：