Question

不幸的是，今天jsfiddle似乎失败了，所以我会尽力描述我的目标。

我有两个固定大小的div（100px乘100px）。这些是jquery-UI-draggable。

Markup看起来像这样：

<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%;
}

现在我尝试使用canvas绘制一条连接这两个div的行，方法是在drag上执行以下操作：

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();

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

Answer 1

因为您要通过CSS而不是width和height属性设置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是否已更改大小。如果有，则相应地调整画布大小。

引用画布位置的问题

1 个答案: