使用Windows Phone 8.1中的加速度傳感器數據在畫布上繪制線條

Question

我正在基於設備移動在畫布上繪畫，我想基於移動在畫布上繪制不同的字符。

當前它正在工作，但是我想找到時差並且我想檢測暫停，暫停表示當用戶不嘗試繪制並且用戶不移動手機時，因此Application ca假定現在用戶要繪制下一個字符。

如何找到加速度計值中的暫停。 有邏輯嗎？ 還告訴我如何使加速度計值平滑，以便用戶可以畫出沒有噪聲的線。

Answer 1

對於加速器部分，我無能為力，但是對於數據中的噪聲，這是使用加權移動平均值的一種方法。

基礎很簡單：

• 找出要使用的電流前要進行平滑處理的點數
• 根據長度f.ex計算重量。 如果長度為5，則權重= 1 + 2 + 3 + 4 + 5 = 15
• 從權重的長度開始迭代每個數據點（您可以從1開始並縮短權重-下面我將演示后者的方法）
• 對於點電流-5乘以1/15，對於點電流-4乘以2/15，依此類推。 總和存儲為該點的值，對下一個值點重復

現場演示

下面是一個演示（進入整頁以查看所有圖形）。 我用JavaScript編寫了它，因此可以在答案中實時顯示它。 我認為您將它轉換為使用的語言應該沒有什么問題（未說明）。

移動滑塊以增加權重點數。 您可以通過多次運行來運行數據，以進一步平滑數據。 原始數據是具有噪聲抖動的正弦曲線。 在許多點上，您可以看到曲線平滑以重復此操作。 僅在2次傳遞中使用9-10點的長度即可獲得良好的結果，並且延遲時間非常短：

 var ctx = document.querySelector("canvas").getContext("2d"), rng = document.querySelector("input"), val = document.querySelector("span"), data = [], scale = 30; // generate sinus wave with noise jitters for(var i = 0; i < ctx.canvas.width; i += 2) data.push(Math.sin(i*0.1) * Math.random() + Math.random()) // draw initial smoothed curve (length=1, no smoothing) drawWMA(); // calculate moving average function drawWMA() { var len = +rng.value, // get smoothing length (number of previous points) dataa = [], datab = [], // pass A and B arrays weight = 0; // calc weight based on length val.innerHTML = len; ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); ctx.beginPath(); // calc weight for(var i = 1; i <= len; i++) weight += i; // add range together [1, length] // plot original data at top of canvas plot(data, 30); // PASS 1: Calc new smoothed array dataa = calcWMA(data, len, weight); // plot smoothed curve ctx.fillText("FIRST PASS:", 0, 100); plot(dataa, 120); // PASS 2 (optional) datab = calcWMA(dataa, len, weight); ctx.fillText("SECOND PASS:", 0, 190); plot(datab, 210); ctx.stroke(); // render plots } function calcWMA(data, len, weight) { var i, t, datao = []; // calc new smoothed array for(i = 0; i < data.length; i++) { // iterate from length to end of data var v = 0; // calc average value for this position for(t = 0; t < len; t++) { // [1, len] if (it >= 0) v += data[it] * ((t+1) / weight); // weight previous values based on -delta } datao.push(v); // store new value } return datao } function plot(data, y) { ctx.moveTo(0, y + data[0]*scale); for(i = 1; i < data.length; i++) ctx.lineTo(i * 2, y + data[i]*scale); } rng.onchange = rng.oninput = drawWMA; 

 <label>Points to consider: <input type="range" min=1 max=50 value=1></label><span>1</span><br> <canvas width=600 height=300></canvas> 

一種不同的方法是使用Savitzky-Golay濾波器 ，該濾波器給出相似的結果，但不會在末端“犧牲”任何點（移動平均線將在末尾向前推動或裁剪）。