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/[email protected]/konva.min.js"></script>
</head>
<body>
<div id="stage-parent">
<div id="container"></div>
</div>
</body>
</html>A layer可能有几个子元素。因此，layer.children只是具有此类对象的数组。
layer.children.each(func)是类似于Array.prototype.forEach()
的功能。它允许为children数组中的每个元素执行一个函数。
node.getClientRect()是一个可计算任何Konva.Node的绝对合并框的函数。边界框只是这样的对象：
{
x: 10,
y: 10,
width: 60,
height: 60
}
即使缩放，旋转等，它也可以检测任何对象的位置和大小。通常，该功能可用于定义形状边缘的位置。