對dynamicjs線點進行異步排序？

Question

最近兩天來我一直在解決的問題有點奇怪，因此我不確定在標題中如何指定。

我有一條KineticJs Line，它具有一個點數組（line.attrs.points），它們的形式為具有x和y值的對象。 拖動某個Kinetic元素時，我想動態地向該線添加點並重新繪制它。 （示例：這條線看起來像這樣：\\ _ _ _ /並且在某些條件下拖動另一個形狀時，我想動態添加一個點並使它看起來像這樣：\\ _ / \\ _ / /）因此，當滿足該條件時在其他形狀的dragmove事件中，我使用以下代碼：

line.attrs.points.push({x:xValue, y:yValue});
line.attrs.points.sort(function(a,b){
    return a.x > b.x; // I tried with a.x - b.x and with short if-s which return only -1, 0 or 1, still nothing happened
});
line.setPoints(line.attrs.points);
layer.draw();

但是這些點沒有排序，所以該行到達一些x，然后返回到一個較小的x，然后再次前進，這不是我在完成這些點后所期望的行為！

奇怪的是，當我使用console.log（line.attrs.points）; 對於三個連續的點加法（每個加法為+2點），我得到以下輸出：

[Object, Object, Object, Object, Object, Object]
[Object, Object, Object, Object, Object, Object, Object, Object]
[Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]

但是當我打開數組時，每個數組中有10個對象。 甚至怎么可能打開一個由6個對象組成的數組並查看其中的10個對象（我使用的是Google Chrome的默認控制台）？ 可能是console.log是異步的，並且在所有添加完成之后將它們記錄下來嗎？

主要的問題是這些問題無法解決，但是我仍然很高興理解控制台為何如此奇怪。

在此先感謝您，感謝您的冗長解釋！

Answer 1

您還需要保持點按繪圖順序（而不是“ x”順序）

為此，向每個點對象添加一個sortBy字段

{ x:10, y:10, sortBy:”1” }
{ x:30, y:10, sortBy:”2” }

要在這兩個點之間添加一個點，只需在sortBy字段中添加一個后綴字母：

{ x:10, y:10, sortBy:”1” }
{ x:20, y:10, sortBy:”1A” }
{ x:30, y:10, sortBy:”2” }

然后使用如下比較函數通過sortBy字段對對象進行排序：

function myCompare(a,b){
    if(a.sortBy<b.sortBy){ return -1; }
    if(a.sortBy>b.sortBy){ return 1; }
    return(0);
}

myPoints.sort(myCompare);

您可以創建一個appendPoint函數以按順序插入點對象

var points=[];
var index=0;

appendPoint(100,150);
appendPoint(200,150);

function appendPoint(x,y){
    points.push({x:x,y:y,sortBy:index.toString()});
    index++;
}

並創建一個insertPoint函數，該函數在任何sortBy索引之后插入一個點對象：

insertPoint(150,100,0);

function insertPoint(x,y,afterIndex){
    points.push({x:x,y:y,sortBy:afterIndex.toString()+"Z"});
    points.sort(pointsCompare);
}

function pointsCompare(a,b){
    if(a.sortBy<b.sortBy){ return -1; }
    if(a.sortBy>b.sortBy){ return 1; }
    return(0);
}

這是示例代碼：

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    .cf:before, .cf:after { content: " "; /* 1 */ display: table; /* 2 */ }
    .cf:after { clear: both; }
</style>

<script>
    $(function(){

    var points=[];
    var index=0;

    appendPoint(100,150);
    appendPoint(200,150);
    showPoints();
    insertPoint(150,100,0);
    showPoints();


    function appendPoint(x,y){
        points.push({x:x,y:y,sortBy:index.toString()});
        index++;
    }

    function insertPoint(x,y,afterIndex){
        points.push({x:x,y:y,sortBy:afterIndex.toString()+"Z"});
        points.sort(pointsCompare);
    }

    function pointsCompare(a,b){
        if(a.sortBy<b.sortBy){ return -1; }
        if(a.sortBy>b.sortBy){ return 1; }
        return(0);
    }

    function showPoints(){
        for(var i=0;i<points.length;i++){
            var pt=points[i];
            console.log(pt.sortBy+": "+pt.x+"/"+pt.y);
        }
    }

    }); // end $(function(){});
</script>

</head>

<body>

</body>
</html>

對dynamicjs線點進行異步排序？

問題描述

1 個解決方案

解決方案1
0 2013-07-17 16:01:30

對dynamicjs線點進行異步排序？

問題描述

1 個解決方案

解決方案1 0 2013-07-17 16:01:30

解決方案1
0 2013-07-17 16:01:30