个人中心
gpt4 book ai didi

javascript - 图像相互接触时不会触发警报

转载 作者：行者123 更新时间：2023-11-30 19:14:23 24 4
gpt4 key购买 nike

我的母语不是英语，而且我是编程语言的初学者。我知道我的解释不是最好的，但我正在努力向人们更好地解释以了解我正在尝试做的事情。所以，请耐心等待我，请不要试图否决投票(这伤害了我的感情)而不是告诉我为什么我的解释不好。感谢您花时间阅读本文。谢谢。

我正在开发名为硬币分类游戏的 Canvas 游戏，该游戏将硬币拖到正确的存钱 jar 图像中。我现在坚持 if 条件。在当前状态下，当特定图像触摸到其他特定图像时不会触发警报。例如，当 1 日元硬币图像与 1 日元存钱 jar 图像接触时，则触发警报，否则不会发生任何事件。

我以为将图像添加到 if 条件会设置特定图像，但它没有用。

   if (haveIntersection(obj.getClientRect(), targetRect)&& (ichiYenImg === ichiYenpiggyImg)) {
  alert("Intersection");
    }

任何人都可以给我建议如何尝试这个问题吗？非常感谢任何帮助!

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)&& (ichiYenImg === ichiYenpiggyImg)) {
      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>

最佳答案

您的代码主要是好的 - 问题在于比较下面复制的“if”语句中的对象，您的目的是确定用户是否将正确值(value)的硬币拖到存钱 jar 中。比较 JavaScript 对象是有效的，但它可能导致不可预测的结果——更可靠和健壮的方法是更明确，为每个对象设置一个已知的属性值并比较这些值。 

if (haveIntersection(obj.getClientRect(), targetRect)&& (ichiYenImg === ichiYenpiggyImg)) {
  alert("Intersection");
}

我在代码片段中的答案是修改代码以使用 Konva“名称”变量来保存硬币和银行值。你可以看到我把它们都设置为 1 日元。现在在 dragMove() 函数中，我从每个被比较的对象中获取名称 attr。当它们匹配时，我们有一个有效的命中，当不匹配时，硬币和银行组合无效。

我修改了代码，以便在拖动正确的硬币时在银行周围放置一个红色边框。

有关名称 attr here，请参阅 Konva 文档.

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;
    }

    // capture the result of the intersection test.
    var checkHit = haveIntersection(obj.getClientRect(), targetRect);

    // get the objects name attribute
    var nameDragged = e.target.attrs['name']; 
    var namePiggy = obj.attrs['name'];
    
    // decide if they match
    var checkNames = (nameDragged === namePiggy);

    // finally decide if we have a valid hit
    if (checkHit && checkNames) {
      // hit ok !
      obj.stroke('red');
      obj.strokeWidth(2)
    }
    else {
      // no hit or not matching name
      obj.stroke(false);
      obj.strokeWidth(0)
    }

  });
});

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,
  name: '1yen'      // use the name attribute to indicate the coin value
});
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,
  name: '1yen'   // use the name attribute to indicate the coin value
});
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>

关于javascript - 图像相互接触时不会触发警报，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58163310/

24 4 0
文章推荐： javascript - 无论如何要等待打印窗口在 print.js 中关闭
文章推荐： c# - 进度条不更新
文章推荐： c - 列表不断打印
文章推荐： javascript - jquery-queryBuilder init 规则与最后提交的搜索
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com