kineticjs線點的異步排序？

過去兩天我一直在爭取的問題有點奇怪，所以我不確定如何在標題中指定它。kineticjs線點的異步排序？

我有一個KineticJs線，它有一個包含x和y值的對象形式的點（line.attrs.points）數組。拖動某個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，然後返回到以下×，然後再前進這是不是我想要的一些點後的行爲！

奇怪的是，當我使用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進行異步處理，並在發生所有添加後記錄它們？

主要的問題是，點的種類不起作用，但我仍然很高興明白爲什麼控制檯如此奇怪。

在此先感謝和抱歉，長時間的解釋！

來源

2013-07-17 user1507558

它看起來異步但它有點不同。當console.log看到一個非字符串或非數字對象時，它只是將一個指針（閉包）連接到該對象到控制檯窗口。它並不真正分析該對象並將其打印出來。只有在控制檯中單擊該對象時纔會對該對象進行真正的評估。這就是爲什麼你看到你看到的行爲。它通常被稱爲懶惰評估。要在調用console.log時查看對象的實際值，您需要執行'JSON.stringify（object）'以強制console.log將其打印爲字符串。 – slebetman

您需要太多讓你點繪製順序（沒有「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」 }

然後使用sort函數使用比較函數對您的對象進行排序離子這樣的：

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

myPoints.sort(myCompare);

可以爲按順序

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++; 
}

插入點對象創建appendPoint函數而創建的任何sortBy索引之後插入一個點對象的在insertPoint功能：

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>

來源

2013-07-17 16:01:30 markE

感謝您的徹底解答！在我的情況下，繪圖順序始終是x順序。我通過使用一個外部數組來存儲這些點，然後在數組發生更改時將它們分配給Line。排序只是拒絕排序他們在line.attrs.points數組中的點。 – user1507558

kineticjs線點的異步排序？

回答

相關問題