如何使用座標「屏幕」屏幕的特定部分？

我剛開始使用Leap Motion（它非常有趣）。 Leap主要用於矢量。現在我想創建一個程序，讓我可以看到矢量指向的位置。我能想象得到的唯一方法是使用一個小圖像，當這個功能打開時出現，使用img.style.left，img.style.top指令進行定位。任何其他想法？如何使用座標「屏幕」屏幕的特定部分？

來源

2015-08-19 ddobby94

我不是太熟悉的Leap或您正在使用的庫，但如果您的目的是在平面2D平面上繪製它，將參考矢量轉換爲2D座標並使用DOM元素繪製您想要繪製的任何內容可能最容易。你也可以考慮使用webGL或像three.js這樣的webGL庫 – anditpainsme

如果您的目標是表示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告訴你什麼是簡單的事情，我們可以用帆布做的。 http://jsfiddle.net/pq8g0bf0/1/

一個不錯的網站，瞭解帆布：http://www.html5canvastutorials.com/tutorials/html5-canvas-element/

由於它的JavaScript，你可以自由地爲你的載體座標做計算，addding事件監聽器等等

來源

2015-08-19 20:54:54 Lauromine

如何使用座標「屏幕」屏幕的特定部分？

回答

相關問題