Konva haveIntersection js
Konva haveIntersection js
提问于 2021-02-12 09:31:18
我是一个新手konvas libray用户，我试着做了一个简单的游戏，我需要检测的时候从形状和显示警告"louser"，问题是形状不规则，因为检测事件的函数工作良好的矩形形状，但在不规则形状不尊重边框形式，我希望可以帮助我一个检测时，框拖出不规则形状和尊重边框，谢谢，代码如下
Konva Drag and Drop Multiple Shapes Demoview raw
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/konva@7.2.2/konva.min.js"></script>
<meta charset="utf-8" />
<title>Konva Drag and Drop Collision Detection Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
var width = window.innerWidth;
var height = window.innerHeight;
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height,
});
var layer = new Konva.Layer();
stage.add(layer);
var RectA = new Konva.Rect({
x: 380,
y:100,
width: 30,
height: 30,
fill: 'grey',
name: 'fillShape',
draggable: true,
stroke: 'red',
hitStrokeWidth: 30,
});
var RectB = new Konva.Line({
x: 350,
y: 80,
points:[0, 0, 50, 0, 50, 100, 0, 100],
fill: 'grey',
closed: true,
name: 'fillShape',
draggable: false,
stroke: 'red',
hitStrokeWidth: 10,
tension: 1,
});
layer.add(RectB);
layer.add(RectA);
layer.draw();
RectA.on('dragmove', function (e) {
var target = e.target;
var targetRect = e.target.getClientRect();
layer.children.each(function (RectB) {
// do not check intersection with itself
if (RectB === target) {
return;
}
if (haveIntersection(RectB.getClientRect(), targetRect)) {
// RectB.findOne('.fillShape').fill('red');
} else {
alert("louse");
// RectB.findOne('.fillShape').fill('grey');
}
// do not need to call layer.draw() here
// because it will be called by dragmove action
});
});
function haveIntersection(r1, r2) {
return !(
r2.x > r1.x + r1.width ||
r2.x + r2.width < r1.x ||
r2.y > r1.y + r1.height ||
r2.y + r2.height < r1.y
);
}
layer.draw();
</script>
</body>
</html>
回答 1
Stack Overflow用户
发布于 2021-03-03 18:15:18
我的建议是使用Hitboxes。
基本思想是用矩形标记出复杂的结构，然后查看每个矩形，看看是否有重叠。你可以用下面的函数检查各个矩形。
对于大多数结构，Hitboxes并不完美，但如果你使用足够的量，它是一个非常准确的估计。
此外，“专业”游戏也是如此。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66165303
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号