Question

过去两天我一直在争吵的问题有点奇怪，所以我不确定如何在标题中指明它。

我有一个KineticJs Line，它有一个带有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，然后返回到较小的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个对象（我正在使用谷歌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索引之后插入一个point对象：

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>

kineticjs线点的异步排序？

1 个答案: