无法在事件处理程序中获取计数器变量答案

【问题标题】：Can't get counter variable in event handler无法在事件处理程序中获取计数器变量
【发布时间】：2013-04-29 11:45:15
【问题描述】：

k=0;
var sf = new Array();
function draw_sf (type,sf_text,schriftgroesse,sf_width,sf_height,x0,y0,ports_top,ports_right,ports_bottom,ports_left) {
    sf[k] = new Kinetic.Group({
        draggable: true
    });

    sf[k]['x0']=x0;
    sf[k]['y0']=y0;

    m=0;
    sf[k][m] = new Kinetic.Rect({
        x: x0,
        y: y0,
        width: sf_width,
        height: sf_height,
        fill: '#EEE',
        stroke: '#000',
        strokeWidth: randbreite_sf
    });
    sf[k].add(sf[k][m]);
    m++;


    sf[k].on('dragend', function() {
        var dx=parseFloat(document.getElementsByName("dx")[0].value);
        var dy=parseFloat(document.getElementsByName("dy")[0].value);
        sf[k]['x']=sf[k]['x0']+dx;
        sf[k]['y']=sf[k]['y0']+dy;
    });
    boxLayer.add(sf[k]);
    k++;
}

我的函数 draw_sf() 绘制矩形，可以通过拖放移动。被删除（事件处理程序'dragend'）后，我想将元素的新位置保存在数组中。但我的计数器变量“k”不计入拖动函数。 k 始终是我调用 draw_sf() 的次数。那么如何保存矩形的实际位置呢？

【问题讨论】：

快速浏览一下，在声明 k 之前尝试添加 var。我不确定你使用的是什么浏览器，但我记得如果你不在旧版本的 FF 中声明它，javascript 会将它视为一个新变量，现在我不确定这些天我总是声明。

标签： javascript html canvas drag-and-drop kineticjs

【解决方案1】：

考虑将方法稍微更改为：

var sf = new Array();
function draw_sf(type, sf_text, schriftgroesse, sf_width, sf_height, x0, y0, ports_top, ports_right, ports_bottom, ports_left) {
  var kineticGroup = new Kinetic.Group({
    draggable:true
  });

  kineticGroup['x0'] = x0;
  kineticGroup['y0'] = y0;

  m = 0;
  kineticGroup[m] = new Kinetic.Rect({
    x:x0,
    y:y0,
    width:sf_width,
    height:sf_height,
    fill:'#EEE',
    stroke:'#000',
    strokeWidth:randbreite_sf
  });
  kineticGroup.add(kineticGroup[m]);
  m++;


  kineticGroup.on('dragend', function () {
    var dx = parseFloat(document.getElementsByName("dx")[0].value);
    var dy = parseFloat(document.getElementsByName("dy")[0].value);
    kineticGroup['x'] = kineticGroup['x0'] + dx;
    kineticGroup['y'] = kineticGroup['y0'] + dy;
  });
  boxLayer.add(kineticGroup);
  sf.push(kineticGroup);
}

事实上，您实际上不需要任何计数器来存储 rect 位置的历史 - 您可以使用 Array.prototype.push 将其推送到数组：http://www.w3schools.com/jsref/jsref_push.asp

【讨论】：