javascript - 使用 Konva.Node.create 加载时，无法在 konva js 中拖动和变换矩形

Question

我正在努力处理一个小项目，我想在其中添加不同的插槽并保存在数据库中。

一切都按预期正常工作，我将 json 保存在数据库中并在编辑页面上再次调用。

Problem is the rectangles added by json are not draggable and not transformed.

我的 JavaScript 代码

 var json = 'jsoncode';
// create node using json string
var stage = Konva.Node.create(json, 'canvas-container');

var layer = new Konva.Layer();
stage.add(layer);
layer.draw();   

stage.on('click', function (e) {
  // if click on empty area - remove all transformers
  if (e.target === stage) {
    stage.find('Transformer').destroy();
    layer.draw();
    return;
  }
  // do nothing if clicked NOT on our rectangles
  if (!e.target.hasName('rect')) {
    return;
  }
  // remove old transformers
  // TODO: we can skip it if current rect is already selected
  stage.find('Transformer').destroy();

  // create new transformer
  var tr = new Konva.Transformer();
  layer.add(tr);
  tr.attachTo(e.target);
  layer.draw();
});



$("#add-shape").click(function(e){
e.preventDefault();
addShape();
}); 

/********  add shape *********/
var addShape = function(){

console.log("add shape");
var $i = 1;

var layer = new Konva.Layer();
var parentContainer = new Konva.Rect({
        x: 30,
        y: 40,
        width: 200,
        height: 60,
        name: random_name(),
        fill: random_hex_color(),
        draggable: true,
        stroke: '#fff',
        strokeWidth: 1
    });
    layer.add(parentContainer);
    stage.add(layer);

    parentContainer.on('click',function(e){
      var tr = new Konva.Transformer();
      layer.add(tr);
      tr.attachTo(e.target);
      layer.draw();
    });


    /*
       * dblclick to remove box for desktop app
       * and dbltap to remove box for mobile app
       */
    parentContainer.on("dblclick dbltap", function() {
        this.destroy();
        stage.find('Transformer').destroy();
        layer.draw();
    });
    stage.on('click', function (e) {
  // if click on empty area - remove all transformers
    if (e.target === stage) {
      stage.find('Transformer').destroy();
      layer.draw();
      return;
    }
    });

    parentContainer.on("transform", function(e){
    console.log('Moving ' + e.target.name());
    //layer.draw();
    });

    parentContainer.on("dragend", function(e){
    console.log('X ' + e.target.x());
    //layer.draw();
    });
}

Answer 1

在您的点击事件监听器中，您有条件:

// do nothing if clicked NOT on our rectangles
if (!e.target.hasName('rect')) {
  return;
}

但是 json 中的矩形没有 rect 名称。您应该添加此名称，或删除条件。