如何在Konva.js中创建冲突

时间:2018-05-14 10:56:32

标签: vue.js konvajs

有人知道如何使用Konva.js在Vue.js中创建图层碰撞?例如,我有一个正方形,中间是小点。我想要的是阻止正方形内的点。我们可以拖动dto但我们无法将其拖出方块。我真的很感激你的帮助:D

  var vm = this;
  const stage = vm.$refs.stage.getStage();

  var layer = new Konva.Layer();
  var group = new Konva.Group({
    x: 100,
    y: 100,
    draggable: false
  });
  var text = new Konva.Text({
    x: 10,
    y: 10,
    fontFamily: "Calibri",
    fontSize: 24,
    text: "",
    fill: "black"
  });
  var rect = new Konva.Rect({
    clearBeforeDraw: true,
    x: 50,
    y: 50,
    width: 100,
    height: 50,
    fill: "green",
    stroke: "black"
  });
  var circle = new Konva.Circle({
    clearBeforeDraw: true,
    x: this.x,
    y: this.y,
    radius: 10,
    fill: "red",
    stroke: "black",
    strokeWidth: 4,
    containment: rect,
    draggable: true,
    name: "fillShape"
  });
  circle.on("dragmove", function() {
    that.x = this.getX();
    that.y = this.getY();
  });
  group.add(rect, circle);
  layer.add(group);
  stage.add(layer);

1 个答案:

答案 0 :(得分:1)

在圆形对象中添加dragBoundFunc,并将限制设置为矩形的绝对宽度和高度

id  CARRIER_NAME CLAIM_TYPE STATUS   DATE       TAG_NAME  RERUN
9   QA_T_MOB    Approved    Passed  2018-05-15  Theft       0
10  QA_T_MOB    Denied      Passed  2018-05-15  Denied      0
11  QA_T_MOB    In Review   Passed  2018-05-15  In Review   0
12  QA_T_MOB    Approved    Failed  2018-05-15  mytag       1