2

下面是我正在为我的 Phonegap 项目编写的一段代码。

JSFiddle：http: //jsfiddle.net/wC79k/

我正在尝试使用提供的角度（sensorAngles 数组）绘制曲线。该数组将通过蓝牙更新（首先作为字符串发送），因此如果接收到的数据没有损坏（也就是每个数组中没有空或假元素，全长），我只需要更新曲线。

我现在正在通过 setTimeout 更新角度数组来“模拟”蓝牙串行更新。

目前，该脚本按预期工作（当损坏的数组/字符串时曲线不会绘制/更新，并且一旦收到非损坏的数组就会继续更新），但我收到上述错误（未捕获的类型错误）。

它似乎与第 26 行有关，其中损坏的数组使 sensorAngles 未定义（因此 .length 不起作用）。

for (var i = 0; i < (sensorAngles.length); i++){
    sensorPos.push({
        x: sensorPos[i].x - diffPos(sensorAngles[i]).dx,
        y: sensorPos[i].y - diffPos(sensorAngles[i]).dy
    });

}

我尝试向它添加 if 语句，但曲线将不再更新。

我 2 天前刚开始使用 Javascript 和 Phonegap，所以任何帮助都会很棒！

干杯，JD

完整代码：

var stage = new Kinetic.Stage({
    container: 'myCanvas',
    width: window.innerWidth,
    height: window.innerHeight
});

var sensorLayer = new Kinetic.Layer();

/* initialise an empty array of all the angles */
var sensorAngles = [0, 0, 0, 0, 0, 0, 0, 0];
//var sensorPos = [];

/* divide each sensor distance segment by height of screen/window for
maximum amount of canvas being used */
var sensorDistance = (stage.getHeight() / ((sensorAngles.length) + 2));

function diffPos(angle){ // angles in radians
    return {
        dx: sensorDistance * Math.sin(angle),
        dy: sensorDistance * Math.cos(angle)
    }
};

function calcSpline(sensorAngles){
    sensorPos = [{x: (stage.getWidth() / 2), y: (stage.getHeight() - sensorDistance)}];
    for (var i = 0; i < (sensorAngles.length); i++){
        sensorPos.push({
            x: sensorPos[i].x - diffPos(sensorAngles[i]).dx,
            y: sensorPos[i].y - diffPos(sensorAngles[i]).dy
        });

    }
    return sensorPos;
};

calcSpline(sensorAngles);

var sensorPos = calcSpline(sensorAngles);
var spine = new Kinetic.Spline({
    points: sensorPos,
    stroke: 'red',
    strokeWidth: 2,
    lineCap: 'round',
    tension: 0.3
});

sensorLayer.add(spine);
stage.add(sensorLayer);



function updateSpline(angles){
    calcSpline(sanityCheck(angles));
    spine.setPoints(sensorPos);
    sensorLayer.draw();
};

function sanityCheck(data) {
    data = data.split(",");
    if (data.filter(function(n){return n}).length === sensorAngles.length) {
        sensorAngles = data;
        return sensorAngles;
    }
}

setTimeout(
    function() {
        updateSpline("0.1,0.12,0.08,-0.2,0.1,0.85,0.1,-0.2")
    },1000
);
setTimeout(
    function() {
        updateSpline("0.1,0.2,0.1,-0.1,0.1,0.1,0.1,-0.2")
    },2000
);
setTimeout(
    function() {
        updateSpline("0.1,0.12,0.08,-0.2,0.1,0.85,0.1,-0.2")
    },3000
);
setTimeout(
    function() {
        updateSpline("0.4,0.5,,-0.6,0.2,0.96,0.02,-0.01") //corrupt 
    },4000
);
setTimeout(
    function() {
        updateSpline("0.1,,0.08,-0.2,0.1,0.85,0.1,-0.2") // corrupt
    },5000
);

setTimeout(
    function() {
        updateSpline("0.6,0.12,0.22,-0.2,0.1,0.85,0.1,-0.2")
    },6000
);
4

2 回答 2

1

如果没有得到长度，您可以尝试console.log() 并检查您是否在控制台中获得写入值？

例子

console.log()
for (var i = 0; i < (sensorAngles.length); i++){
    sensorPos.push({
        x: sensorPos[i].x - diffPos(sensorAngles[i]).dx,
        y: sensorPos[i].y - diffPos(sensorAngles[i]).dy
    });
}
于 2018-11-12T18:20:13.120 回答
0

您可以使用 try...catch 块来忽略损坏的数组。

http://jsfiddle.net/wC79k/1/

try {
for (var i = 0; i < (sensorAngles.length); i++){
    sensorPos.push({
        x: sensorPos[i].x - diffPos(sensorAngles[i]).dx,
        y: sensorPos[i].y - diffPos(sensorAngles[i]).dy
    });

}
}catch(err){
    // console.log("oops");
}
于 2013-07-24T17:57:31.020 回答