Question

我想知道在拖动时如何获取元素（多维数据集）的名称或ID

for(var i = 1; i < 10; i++) {

      var cube = new Konva.Rect({
        ...
        name = "cube + i
        draggable: true
    }
    ... 
    groupCube.on('dragstart', function() {
        // get id of the cube i drag
    }

Answer 1

修改伪代码是这样的：

for(var i = 1; i < 10; i++) {

  var cube = new Konva.Rect({
    ...
    id = "cube" + i,
    name = "cube + i,
    draggable: true
}
... 
groupCube.on('dragstart', function(e) {
    // get id of the cube i drag
    var draggedId = e.target.attrs.id;
}

请参见下面的工作示例-方块游戏的基础知识，但会显示所选方块的ID。

// Set up the canvas / stage
var stage = new Konva.Stage({container: 'container1', width: 320, height: 320});

// Add a layer
var layer = new Konva.Layer({draggable: false});
stage.add(layer);

// Add a tile layer
var layer2 = new Konva.Layer({draggable: false});
stage.add(layer2);


for (var i = 0; i < 50; i = i + 1){

  var c = new Konva.Circle({
    radius: 40,
    fillLinearGradientStartPoint: { x : -50, y : -50},
    fillLinearGradientEndPoint: { x : 50, y : 50},
    fillLinearGradientColorStops: [0, getRandomRgb(), 1, getRandomRgb()],
    stroke: 'black',
    strokeWidth: 4,
    x: Math.random() * (320),
    y: Math.random() * (360)
    })
  
    layer.add(c);
    layer.draw()
}


var pics = [];
var picNo = 0;
  for (var i = 0; i < 4; i = i + 1) {
    for (var j = 0; j < 4; j = j + 1) {

      var dataURL = stage.toDataURL({x: i * 80, y: j * 80, width: 80, height: 80});

      var pic = new Image();
      pic.src = dataURL;
      pics[picNo] = pic;
      
      var cube = new Konva.Image({
        x: i * 80, 
        y: j * 80,
        image: pics[picNo],
        width: 80,
        height: 80,
        stroke: 'silver',        
        id : "cube" + picNo,      // give the shape an id
        name : "cube" + picNo,
        draggable: true
      })
      layer2.add(cube);
      layer2.draw();
      picNo=picNo+1;
  }
}

stage.draw();

stage.find("Image").on('dragstart', function(e) {
        // get id of the cube i drag
        var draggedId = e.target.attrs.id;
        $('#theId').html(draggedId);
        layer.remove()
})

function getRandomRgb() {
  var num = Math.round(0xffffff * Math.random());
  var r = num >> 16;
  var g = num >> 8 & 255;
  var b = num & 255;
  return 'rgb(' + r + ', ' + g + ', ' + b + ')';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/konvajs/konva/1.6.5/konva.min.js"></script>
<p>Clicked cube id = <b><span id='theId'>Click a cube</span></b?
</p>
<div id='container1' style="display: inline-block; width: 300px, height: 200px; background-color: silver; overflow: hidden; position: relative;"></div>
<div id='img'></div>

获取我拖动它的元素的名称或ID

1 个答案: