Question

我刚刚开始使用Leap Motion（非常有趣）。 Leap主要用于向量。现在我想创建一个程序，我可以在其中可视化向量指向的位置。我可以想象这样做的唯一方法是使用一个小图像，该图像在启用此功能时显示，并使用img.style.left，img.style.top指令进行定位。还有其他想法吗？

Answer 1

如果您的目标是表示2D矢量，您可以使用画布绘制线条。

画布就像一个div但是你可以在其中绘制任何你想要的东西，我对Leap Motion一无所知但是如果你想在精确的坐标上绘制线条和圆圈，它可能是一个很好的解决方案而不是工作与DOM本身。

JS部分看起来像这样：

var canvas = document.getElementById('my-canvas');
var ctx = canvas.getContext('2d');

//For exemple here is how to draw a rectangle
//fillStyle support all valid css color
ctx.fillStyle = "rgba(50, 255, 24, 0.7)";
//Create the rectangle, with (startX, startY, height, width)
ctx.fillRect(20, 15, 50, 50);

ctx.beginPath(); //Tells canvas we want to draw
ctx.moveTo(250,250); //Moves the cursor to the coordinates (250, 250);
ctx.lineTo(75, 84); //Draws a line from the cursor (250, 250) to (75, 84);
ctx.closePath(); //Tells canvas to 'close' the drawing

ctx.strokeStyle = "red";
ctx.stroke(); //Draws the line stroke

HTML就是：

<canvas id="my-canvas" height="500px" width="500px">
    Here is the text displayed when the browser doesnt support canvas.
</canvas>

我做了一个jsfiddle来向你展示我们可以用canvas做什么简单的事情。 http://jsfiddle.net/pq8g0bf0/1/

一个学习画布的好网站：http://www.html5canvastutorials.com/tutorials/html5-canvas-element/

因为它是javascript，你可以自由地计算你的向量坐标，添加eventListeners等......

如何使用坐标“着色”屏幕的特定部分？

1 个答案: