Fatal编程技术网
  • javascript/
  • Javascript kineticjs线点的异步排序？

Javascript kineticjs线点的异步排序？

javascript jquery html canvas

Javascript kineticjs线点的异步排序？,javascript,jquery,html,canvas,kineticjs,Javascript,Jquery,Html,Canvas,Kineticjs,过去两天我一直在努力解决的问题有点奇怪，所以我不确定如何在标题中具体说明 我有一条KineticJs线，它有一个点数组（Line.attrs.points），其形式为具有x和y值的对象。 在拖动某个动力学元素时，我希望动态地向直线添加点并重新绘制它。 （示例：该线看起来像：\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\/） 因此，当在另一个形状的dragmove事件中满足该条件时，我使用以下代码： line.attrs.points.

过去两天我一直在努力解决的问题有点奇怪，所以我不确定如何在标题中具体说明

我有一条KineticJs线，它有一个点数组（Line.attrs.points），其形式为具有x和y值的对象。 在拖动某个动力学元素时，我希望动态地向直线添加点并重新绘制它。 （示例：该线看起来像：\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\/） 因此，当在另一个形状的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是异步的，并在所有添加发生后记录它们

主要的问题是这类点不起作用，但我仍然很高兴理解为什么控制台的行为如此奇怪

提前谢谢，抱歉解释得太长了

您也需要按绘图顺序（而不是“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);
并创建一个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);
}

insertPoint（150100,0）；
函数插入点（x、y、afterIndex）{
push（{x:x，y:y，sortBy:afterIndex.toString（）+“Z”}）；
points.sort（points比较）；
}
功能点比较（a、b）{
if（a.sortByb.sortBy）{return 1；}
返回（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>


正文{背景色：象牙；}
.cf:before.cf:before{content:：；/*1*/display:table；/*2*/}
.cf:在{clear:both；}之后
$（函数（）{
var点=[]；
var指数=0；
附加点（100150）；
附录点（200150）；
showPoints（）；
插入点（150100,0）；
showPoints（）；
函数附加点（x，y）{
push（{x:x，y:y，sortBy:index.toString（）}）；
索引++；
}
函数插入点（x、y、afterIndex）{
push（{x:x，y:y，sortBy:afterIndex.toString（）+“Z”}）；
points.sort（points比较）；
}
功能点比较（a、b）{
if（a.sortByb.sortBy）{return 1；}
返回（0）；
}
函数showPoints（）{

for（var i=0；iIt看起来是异步的，但有点不同。当console.log看到一个非字符串或非数字对象时，它只链接一个指针（闭包）将该对象添加到控制台窗口。它不会真正解析该对象并打印它。只有当您在控制台中单击该对象时，才会真正计算该对象。这就是为什么您会看到所看到的行为。它通常被称为延迟计算。要在调用console.log时查看该对象的实际值，您需要执行
JSON.stringify（对象）
强制console.log将其打印为字符串。感谢您的详细回答！在我的情况下，绘图顺序始终是x顺序。我使用外部数组存储点，然后在数组更改时将其分配给行。Sort只是在点位于Line.attrs.points数组中时拒绝对点进行排序。

<!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>