引用画布位置的问题答案

【问题标题】：Problems referencing canvas position引用画布位置的问题
【发布时间】：2023-03-15 10:23:01
【问题描述】：

不幸的是，jsfiddle 今天好像挂了，所以我会尽力描述我所追求的。

我确实有两个固定大小的 div（100 像素 x 100 像素）。这些是 jquery-UI 可拖动的。

标记看起来像这样：

<body>
<div class="touch" id="front"><img src="front.png" /></div>
<div class="touch" id="back"><img src="back.png" /></div>
<canvas id="connect"></canvas>
</body>

CSS 看起来像这样：

.touch{
width: 100px;
height: 100px;
background-color: red;
}
#connect{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

现在我正在尝试使用画布通过在drag 上执行以下操作来绘制一条连接这两个 div 的线：

var ctx = canvas.getContext('2d');
ctx.beginPath();  
ctx.moveTo($('#front').offset().left,$('#front').offset().top);  
ctx.lineTo($('#back').offset().left,$('#back').offset().top);  
ctx.stroke();

这是根据divs 的运动绘制一条线，但它完全不成比例，即起点和终点似乎乘以某个因子。然而，当我通过硬编码值绘制元素时，它似乎工作正常，而当我记录 offset()-values 时，它们似乎是合理的。谁能告诉我我在这里做错了什么？

【问题讨论】：

标签： javascript css jquery-ui canvas

【解决方案1】：

因为您是通过 CSS 而不是宽度和高度属性来设置 Canvas 的宽度和高度。帆布在这方面很特别。

默认情况下，画布是 300x150，现在仍然是，它只是被 CSS“拉伸”为 100%/100%。

我强烈建议不要在 CSS 中定义画布的大小，因为您只会将其从“真实”大小缩放。

在设置期间的代码中，您将不得不这样做

// silly pseudocode
canvas.width = theCanvasParent.clientWidth; // or whatever attribute it is, I'd reccomend putting all of those things in one giant container div
canvas.height = theCanvasParent.clientHeight;

由于大多数浏览器不会在父 div 更改大小时触发事件，因此您只需使用计时器每隔半秒检查一次，以查看 div 是否更改了大小。如果有，则相应地调整画布的大小。

【讨论】：

我最终使用了像canvas.width = document.width; canvas.height = document.height; 这样简单的东西，效果很好。谢谢你的解释！
只是一个简短的说明，在用户调整窗口大小之前将起作用，但如果用户安装了 StumbleUpon 栏之类的东西，它将被破坏，因为该栏为 <html> 元素添加了边距.不过这种情况很少见。
有趣的提示，但由于这将用于锁定方向的基于 Phonegap 的 Android 应用程序，因此在这种情况下可能的陷阱数量大大减少。幸运的我。谢谢。