Question

我正在创建一个网页，在页面滚动时沿着路径绘制轨迹，使用画布绘制轨迹和SVG来确定路径坐标。（与此演示类似 - https://tympanus.net/Development/StorytellingMap/）

我有一个隐藏的画布设置为一个房间＆＃39;其中包含完整的地图背景，然后从中绘制到主画布（使用＆＃39;相机＆＃39;来获取位置）。我设法使用drawImage缩放背景以缩放所选区域，如下所示：

ctx.drawImage(
    image,
    camera.position.x + ((canvas.width  - (canvas.width  / zoom)) / 2),
    camera.position.y + ((canvas.height - (canvas.height / zoom)) / 2),
    canvas.width / zoom,
    canvas.height / zoom,
    0,
    0,
    canvas.width,
    canvas.height
);

通过循环遍历点数组来绘制线条：

ctx.beginPath();
for (var i = 0; i < points.length; i++) {
    ctx.lineTo(
        points[i].x - camera.position.x,
        points[i].y - camera.position.y
    );
}
ctx.stroke();

但是我无法调整线条以适应变焦 - 我可以将所有坐标乘以缩放系数并且尺寸看起来是正确的，但是我丢失了相机设置的位置，所以它是没有与背景对齐。谁能告诉我如何解释这个问题？

我希望我已经解释得这么好了，如果有人需要在上下文中看到它，我可以尝试上传整个内容！

如有任何问题，请与我联系。我非常感谢任何建议或指导。

修改

链接：http://staging.clicky.co.uk/map-scroll/（滚动查看地图更新！）

放大HTML <canvas>

0 个答案: