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

时间:2013-05-05 16:20:04

标签: javascript html5 canvas drag-and-drop kineticjs

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()绘制了矩形,可以通过拖放来移动它。在被droped(事件处理程序'dragend')之后,我想在元素中保存元素的新位置。但我的计数器变量'k'在dragend-function中并不算数。 k总是我调用draw_sf()的次数。 那么如何保存矩形的实际位置呢?

1 个答案:

答案 0 :(得分: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) {
  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