文章/答案/技术大牛

发布

社区首页 >问答首页 >引用画布位置时出现问题

问引用画布位置时出现问题
EN

Stack Overflow用户

提问于 2012-02-10 01:07:46

回答 1查看 277关注 0票数 2

不幸的是，jsfiddle今天似乎停机了，所以我将尽我最大的努力来描述我正在寻找的东西。

我有两个固定大小的div (100px X 100px)。这些是jquery-UI-draggable。

如下所示的标记：

<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通过在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();

这是因为根据div的运动绘制了一条线，但它完全不成比例，即起点和终点似乎乘以了某个因子。然而，当我通过硬编码值绘制一个元素时，它似乎工作得很好，而当我记录offset()-values时，它们似乎是可信的。有人能告诉我我哪里做错了吗？

javascript

css

jquery-ui

canvas

回答 1

Stack Overflow用户

回答已采纳

发布于 2012-02-10 01:38:10

因为您是通过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是否更改了大小。如果有，则相应地调整画布的大小。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/9215390

复制

相似问题

问引用画布位置时出现问题
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引用画布位置时出现问题EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引用画布位置时出现问题
EN