Question

我正在努力处理我希望添加不同插槽并保存在数据库中的小项目。

所有事情都按预期工作正常，我将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();
    });
}

Answer 1

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

void executeMethods(boolean m1, boolean m2, boolean m3, boolean m4){
   if(m1) m1();
   if(m2) m2();
   if(m3) m3();
   if(m4) m4();
}

executeMethods(true,false,false,true);

但是json中的矩形没有// do nothing if clicked NOT on our rectangles if (!e.target.hasName('rect')) { return; }名称。您应该添加此名称，或删除条件。

加载Konva.Node.create

1 个答案: