Как создавать коллизии в Konva.js - PullRequest
Новая
       7

Как создавать коллизии в Konva.js

0 голосов
/ 14 мая 2018

кто-нибудь знает, как создавать столкновения слоев в Vue.js, используя Konva.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 голосов
/ 16 мая 2018

Добавить dragBoundFunc в объект круга и установить пределы абсолютной ширины и высоты прямоугольника 

var circle = new Konva.Circle({
    clearBeforeDraw: true,
    x: 75,
    y: 75,
    radius: 10,
    fill: "red",
    stroke: "black",
    strokeWidth: 4,
    containment: rect,
    draggable: true,
    name: "fillShape",
    dragBoundFunc: function(pos) {
        const x = Math.min(250-12, Math.max(pos.x, 150+12));
        const y = Math.min(200-12, Math.max(pos.y, 150+12));
        return {x, y};
   }
});
...