如何通过在背景画布中绘制线条来连接两个HTML元素？ [英] How can I connect two HTML elements by drawing lines in a background canvas?

问题描述

可能更多的是一个数学问题，但是这里有...

我想要做的是两个HTML元素通过一个动画线连接背景画布

这是我想要做的简化版本的小提琴。

http://jsfiddle.net/loupax/zUqXn/

这些线实际上存在，但它们不在画布中，如果使用元素检查器，则可以在画布中看到绘制线的坐标。
有人可以帮我解决我做错了什么，而这些线条是不合适的吗？

这是线条被绘制出来的证据的地方。 （用固定尺寸替换流体阶段和画布尺寸）

http://jsfiddle.net/loupax/zUqXn/8/

编辑
看起来像我想要做的是流体布局不可能。在发现了很多麻烦之后，我发现Canvas元素是它自己的平面，并且没有安全的方法来将锚点坐标与没有固定尺寸的画布坐标进行匹配。

解决方案

我找到了错位的原因。

好像CSS的宽度和高度完全不同于canvas元素的实际宽度和高度。因此，如果您希望使HTML元素的坐标与Canvas元素上的线条坐标相匹配，则需要在包含该元素的div上设置固定宽度，并且直接在元素上设置相同的固定宽度和高度， p>

这里是固定的例子，所以你可以看看：

http://jsfiddle.net/loupax/zUqXn/29/

Probably more of a math question, but here it goes...

What I want to do is two HTML elements to be connected by an animated line on a background canvas

Here is a fiddle with a simplified version of what I want to do.

http://jsfiddle.net/loupax/zUqXn/

The lines are actually there, but they are outside of the canvas, and if you use your element inspector you can see the coordinates of the drawn lines in the canvas. Could someone help me on what I'm doing wrong and the lines get drawn out of place?

This is the proof that the lines are drawn but out of place. (replaced fluid stage and canvas size with fixed dimensions)

http://jsfiddle.net/loupax/zUqXn/8/

EDIT Looks like what I'm trying to do is not possible for a fluid layout. After a lot of trouble I found out that the Canvas element is it's own plane and there is no safe way to match anchor coordinates with canvas coordinates with no fixed sizes

解决方案

I have found out the reason of the missplacement of the lines.

It seems like that CSS width and height of canvas is completely different than the actual width and height of the canvas element. So if you wish to make the coordinates of the HTML elements match the coordinates of the lines on the Canvas element, you need to set fixed width on the div that contains it and the same and fixed width and height, directly on the element

Here is the fixed example so you can have a look:

http://jsfiddle.net/loupax/zUqXn/29/

这篇关于如何通过在背景画布中绘制线条来连接两个HTML元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！