Что такое getClientRect ();метод и layer.children.each делать в JavaScript? - PullRequest
Новая
       28

Что такое getClientRect ();метод и layer.children.each делать в JavaScript?

0 голосов
/ 27 сентября 2019

Как работает getClientRect ();метод работы в этом коде?Это значит получить стороны прямоугольников?Кроме того, что такое layer.children.each в приведенном ниже коде?Значит ли это, что выбираются все дочерние узлы?Может кто-нибудь объяснить мне, как этот метод работает?Я проверил документ, но все еще не понимаю, как они работают.Спасибо! 

var stage = new Konva.Stage({
  width: 400,
  height: 200,
  container: 'container'
});
var layer = new Konva.Layer();
stage.add(layer);

layer.on('dragmove', function(e) {
  var target = e.target;
  var targetRect = e.target.getClientRect();
  layer.children.each(function(obj) {
    if (obj === target) {
      return;
    }
    if (haveIntersection(obj.getClientRect(), targetRect)) {
      alert("Intersection")
    }    
  });
});

function haveIntersection(r1, r2) {
  return !(
    r2.x > r1.x + r1.width/2 ||
    r2.x + r2.width/2 < r1.x ||
    r2.y > r1.y + r1.height/2 ||
    r2.y + r2.height/2 < r1.y
  );
}

// This will draw the image on the canvas.
function drawImage(source, konvaImage) {
  layer.add(konvaImage);
  var image = new Image();
  image.src = source;
  image.onload = function() {
    konvaImage.image(image);
    layer.draw();
  }
}


//1yen
var ichiYenImg = new Konva.Image({
  x: 20,
  y: 20,
  width: 100,
  height: 100,
  draggable: true
});
var sourceImg1 = "https://illustrain.com/img/work/2016/illustrain09-okane5.png";
drawImage(sourceImg1, ichiYenImg);


var goYenImg = new Konva.Image({
  x: 120,
  y: 20,
  width: 100,
  height: 100,
  draggable: true
});
var sourceImg2 = "https://illustrain.com/img/work/2016/illustrain09-okane7.png";
drawImage(sourceImg2, goYenImg);

//piggy bank 1yen
var ichiYenpiggyImg = new Konva.Image({
  x: 300,
  y: 100,
  width: 100,
  height: 100,
  draggable: false
});
var sourceImg7 = "https://user-images.githubusercontent.com/31402838/63416628-a322b080-c3b4-11e9-96e8-e709ace70ec1.png";
drawImage(sourceImg7, ichiYenpiggyImg);
<!DOCTYPE html>
<html lang="en">

<head>
  <script src="https://unpkg.com/konva@4.0.5/konva.min.js"></script>
</head>

<body>
  <div id="stage-parent">
    <div id="container"></div>
  </div>
</body>

</html>

1 Ответ

1 голос
/ 27 сентября 2019

A layer может иметь несколько дочерних элементов.Так что layer.children - это просто массив с такими объектами.

layer.children.each(func) - это функция, похожая на Array.prototype.forEach () .Это позволяет выполнять функцию для каждого элемента в массиве children.

node.getClientRect() - это функция, которая вычисляет абсолютную ячейку для любого Konva.Node.Ограничительный прямоугольник - это просто объект, подобный следующему: 

{
   x: 10,
   y: 10,
   width: 60,
   height: 60
}

Он позволяет определять положение и размер любого объекта, даже если он масштабирован, вращается и т. Д. Обычно эту функцию можно использовать дляопределено положение f ребер фигур.

...