Оповещение не срабатывает, когда изображения касаются друг друга - PullRequest
Новая
       32

Оповещение не срабатывает, когда изображения касаются друг друга

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

Я не являюсь носителем английского языка и начинаю изучать язык программирования. Я понимаю, что мое объяснение не лучшее, но я пытаюсь объяснить людям лучше, чтобы понять, что я пытаюсь сделать. Поэтому, пожалуйста, будьте терпеливы со мной и, пожалуйста, не пытайтесь понизить голосование (это ранит мои чувства) вместо того, чтобы говорить мне, почему мое объяснение плохое. Я ценю ваше время, чтобы прочитать это. Спасибо.

Я работаю над игрой на холсте, называемой игрой сортировки монет, которая заключается в перетаскивании монет в правильные изображения копилки. Я застрял, если состояние сейчас. В текущем состоянии предупреждение не сработает, когда конкретное изображение соприкасается с другим конкретным изображением. Например, когда изображение монеты в 1 иену соприкасается с изображением копейки в 1 иену, тогда выдается предупреждение, иначе никакого события не происходит.

Я думал, что добавление изображений в случае, если условие будет устанавливать конкретные изображения, но это не сработало. 

   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>

1 Ответ

1 голос
/ 01 октября 2019

Ваш код в основном хорош - проблема заключается в сравнении объектов в операторе 'if', скопированном ниже, где вы намерены решить, перетаскивает ли пользователь монетку правильного значения в копилку. Сравнение объектов JavaScript допустимо, но оно может привести к непредсказуемым результатам - более надежный и надежный подход должен быть более явным, установить известное значение атрибута для каждого объекта и сравнить эти значения. 

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

Мой ответ в фрагменте кода заключается в изменении кода для использования переменной Konva 'name' для хранения значений монеты и банка. Вы можете видеть, что я установил их обоих на 1 иен. Теперь в функции dragMove () я получаю имя attr от каждого сравниваемого объекта. Когда они совпадают, у нас есть действительный удар, а когда нет совпадения, комбинация монета и банк недействительны.

Я изменил код, чтобы поставить красную рамку вокруг банка, когда перетаскивается правильная монета.

См. Документацию Konva для названия attr здесь . 

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>
...