加载 Konva.Node.create 时无法在 konva js 中拖动和转换矩形答案

【问题标题】：Not able to drag and transform rectangles in konva js when loaded with Konva.Node.create加载 Konva.Node.create 时无法在 konva js 中拖动和转换矩形
【发布时间】：2018-09-30 00:18:35
【问题描述】：

我正在为想要添加不同插槽并保存在数据库中的小项目而苦苦挣扎。

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

问题是json添加的矩形不能拖动，不能变形。

我的 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();
    });
}

【问题讨论】：

你能用 JSON 示例创建一个在线演示吗？
我已经创建了在线演示jsfiddle link

标签： javascript html5-canvas konvajs

【解决方案1】：

在您的点击事件监听器中，您有以下条件：

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

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

【讨论】：