getClientRect()；method和layer.children.each在JavaScript中是做什么的？
getClientRect()；method和layer.children.each在JavaScript中是做什么的？
提问于 2019-09-27 14:16:14
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
Stack Overflow用户
发布于 2019-09-27 22:36:12
一个layer可以有几个子元素。因此，layer.children只是一个包含这些对象的数组。
layer.children.each(func)是一个类似于Array.prototype.forEach() 的函数。它允许对children数组中的每个元素执行一个函数。
node.getClientRect()是一个计算任何Konva.Node的绝对边界框的函数。边界框就是如下所示的对象：
{
x: 10,
y: 10,
width: 60,
height: 60
}它允许您检测任何对象的位置和大小，即使它是缩放、旋转等。通常，该函数可用于定义形状的边缘位置。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58128786
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号